[jQuery] 위로 스크롤링되는 갤러리 구현

#BoardLatest .boardWrap .gallery #mg_list { position: relative; width: 278px; height: 105px; overflow: hidden; }
#BoardLatest .boardWrap .gallery #mg_list ul { margin: 0; padding: 0; list-style: none; }
#BoardLatest .boardWrap .gallery #mg_list li { position: absolute; left: 0; top: 105px; width: 291px; height: 105px; }
#BoardLatest .boardWrap .gallery #mg_list li .iwrap { float: left; width: 84px; margin-right: 13px; }
#BoardLatest .boardWrap .gallery #mg_list li .iwrap .image { width: 82px; height: 56px; border: 1px solid #ccc; overflow: hidden; }
#BoardLatest .boardWrap .gallery #mg_list li .iwrap .image img { width: 82px; height: 56px; }
#BoardLatest .boardWrap .gallery #mg_list li .iwrap .subj { width: 84px; height: 32px; text-align: center; padding-top: 10px; color: #666; font-size: 11px; overflow: hidden; }
#BoardLatest .boardWrap .gallery #mg_list li .iwrap .subj a { color: #666; text-decoration: none; }
#BoardLatest .boardWrap .gallery #mg_list li .iwrap .subj a:hover { text-decoration: underline; }

<div id=”mg_list”>
    <ul>
        <li>
        <?php // 최근갤러리
        $write_table = $g4[‘write_prefix’] . “gallery”;
        $sql = ” select wr_id, wr_subject from $write_table where wr_is_comment = ‘0’ order by wr_num asc limit 0, 9 “;
        $result = sql_query($sql);

        for($i = 0; $row = sql_fetch_array($result); $i++) {
            if($i > 0 && ($i % 3) == 0) {
                echo “</li>n”;
                echo “<li>n”;
            }

            $subject = get_text($row[wr_subject]);
            $href = “$g4[bbs_path]/board.php?bo_table=gallery&wr_id=$row[wr_id]”;

            // 파일정보
            $sql = ” select bf_file from $g4[board_file_table] where bo_table = ‘gallery’ and wr_id = ‘$row[wr_id]’ order by bf_no asc limit 0, 1 “;
            $file = sql_fetch($sql);
            $filepath = “$g4[path]/data/file/gallery/$file[bf_file]”;
            if(trim($file[bf_file]) && file_exists($filepath)) {
                $img = “<img src=”$filepath” alt=”$subject” />”;
            } else {
                $img = “<img src=”$g4[img_path]/noimage.jpg” alt=”$subject” />”;
            }

            $subject = “<a href=”$href”>” . $subject . “</a>”;
            $img = “<a href=”$href”>” . $img . “</a>”;
        ?>
            <div class=”iwrap”>
                <div class=”image”><?php echo $img; ?></div>
                <div class=”subj”><?php echo $subject; ?></div>
            </div>
        <?php
        }

        if($i == 0) {
            echo “<div class=”nolist”>등록된 게시물이 없습니다.</div>”;
        }
        ?>
        </li>
    </ul>
</div><!– /mg_list –>

<script type=”text/javascript”>
var idx = 0;
var old_idx = 0;
var speed = 1000;
var interval = 3000;
var cnt = $(‘#mg_list li’).size();

$(function() {
    // 갤러리 스크롤링
    $(‘#mg_list li:eq(0)’).animate(
        { “top”: “0px”}, speed,
        function() {
            if(cnt > 1) {
                gallery_interval = setInterval(“gallery_scrolling()”, interval);
            }
        }
    );

    $(‘#mg_list’).hover(
        function() {
            clearInterval(gallery_interval);
        },
        function() {
            gallery_interval = setInterval(“gallery_scrolling()”, interval);
        }
    );
});

function gallery_scrolling()
{
    if(cnt > 1) {
        idx = (old_idx + 1) % cnt;
        $(‘#mg_list li:eq(‘ + old_idx + ‘)’).animate(
            { “top”: “-105px”}, speed,
            function() {
                $(this).css(“top”, “105px”);
            }
        );
        $(‘#mg_list li:eq(‘ + idx + ‘)’).animate({ “top”: “0px” }, speed);
    &nb
sp;   old_idx = idx;
    }
}
</script>