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

왼쪽과 같은 최근 갤러리에서 리스트를 위로 스크롤링되도록

만들어야 하는 일이 생겼다. 공개된 소스도 많고 방법은 여러

가지가 있겠지만 jQuery를 알고 나서는 왠만한 코드는 스스로

작성해보자는 생각이 강하게 들어서 오늘도 역시 무한삽질..

어려운 부분이 아니라서 생각만 잘 정리하면 쉬울 것 같았는데

아직은 기본이 부족한지 생각보다는 시간이 많이 걸렸다는..

우선 아래는 CSS 코드 중 일부이다.

#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; }

그리고 아래는 HTML 코드의 일부이다.

<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 –>

그리고 마지막으로 jQuery 코드.

<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>

사실 뭐 대단한 코드는 아니다. 더 쉬운 코드가 있을 수도 있는데.. 그냥 혼자 만들어보고 싶어서.. ^^; 그냥 이렇게도

구현을 할 수 있구나 정도로 참고만 하면 될 것 같다. 언제쯤 스스로 작성한 코드에 자신감을 가질 수 있을까?? ㅎㅎ

덧, 위 코드 중 php 코드 부분은 그누보드 기반이라 거기에 있는 걸 그냥 그대로 사용했다. 최근 게시물 스킨을 사용해

구현해도 되는데.. 언제부턴가 그것보다는 직접 코드를 짜는 게 더 편해지기 시작했다는.. ㅎ

편리

PHP와 MariaDB, jQuery 등을 사용해 게시판, 쇼핑몰 솔루션을 개발합니다. 그누보드5와 영카트5 개발에 참여 했습니다. Linux와 Nginx는 물론 WordPress, Git 등에도 관심이 많습니다. 자전거 타기 및 사진 촬영을 취미로 하고 있습니다.

카카오톡 플러스친구 채팅 : NCUBE.NET

2 thoughts to “[jQuery] 위로 스크롤링되는 갤러리 구현”

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.