주 콘텐츠로 건너뛰기

메인 게시판 목록에 롤링 효과 적용하기

게시판 목록을 아래로 하나씩 롤링해주는 기능을 적용할 수 있어요.

자세히 알아보기

 

메인 게시판 목록에 적용하기

  1. 스마트디자인 편집창에서 좌측 하단에서 [화면추가]를 선택해 주세요.
  2. 게시판 롤링 관련 css, js 파일을 추가해 주세요. (css, js소스는 아래에 있어요)
  3. 하단 소스를 활용하여 css, js 파일을 만든 후 쇼핑몰 메인(index.html)에서 게시판 영역을 클릭해 해당 소스로 이동해 주세요.
  4. 아래 이미지의 2번과 같이 소스를 추가해 주세요.
    • 주황색 소스: 추가한 css, js 파일을 로드 시켜줘요.
    • 파란색 소스: js가 적용되도록 id값을 부여해줘요.
    <div id="boardArea">
        <!--@css(/css/module/layout/boardVerSlide.css)-->
        <!--@js(/js/module/layout/boardVerSlide.js)-->    
        <div id="boardVerticalSlide_1" module="board_listpackage_5">

020.jpg

 

CSS 파일 - [/css/module/layout/boardVerSlide.css]

/*
    메인 >  자유 게시판 롤링
*/
.boardVerSlideArea { overflow:hidden; position:relative; }
.boardVerSlideArea .list { position:absolute; left:0px; width:100%; }

 

JS 파일 - [/js/module/layout/boardVerSlide.js]

/*
    게시판 롤링
*/
$.fn.boardVerSlide = function (settings) {
    settings = $.extend({
        view : 5,
        direction : 'up',
        delay : 5000
    }, settings);
    var option = [];
    option = $.extend({}, $.fn.boardVerSlide.defaults, settings);
    return this.each(function () {
        $.fn.extend(this, boardVerSlide);
        this.wrap = $(this);
        this.option = option;
        this.direction = this.option.direction;
        this.delay = this.option.delay;
        this.view = this.option.view;
        this.init();
    });
};
var boardVerSlide = {
    init : function(){
        var direction = this.direction;
        var delay = this.delay;
        var table = this.wrap.find('table');
        var tbody = table.find('> tbody');
        var view = this.view;
        var tableHeight = table.outerHeight();
        var trLength = tbody.find('> tr').length;
        var trHeight = tbody.find('> tr').outerHeight();
        var boardVerSlideAreaHeight = trHeight * view;
        table.wrap('<div class="boardVerSlideArea" style="height:'+ boardVerSlideAreaHeight +'px;" />');
        table.wrap('<div class="list" />');
        var boardVerSlideArea = this.wrap.find('.boardVerSlideArea');
        var list = this.wrap.find('.list');
        table.find('caption').remove();
        table.find('thead').remove();
        if ($.browser.webkit) {
            var tdBorderBottom = parseInt(tbody.find('tr > td').css('border-bottom-width'));
            var padddingBottom = (view * tdBorderBottom) + 1;
            boardVerSlideArea.css({'paddingBottom': padddingBottom + 'px'});
        }
        function action() {
            switch(direction){
                case "up":
                    var item = tbody.find('> tr:first-child');
                    var itemClone = item.clone();
                    tbody.append(itemClone);
                    if ($.browser.opera || $.browser.webkit) {
                        list.css({'marginTop':'-1px'});
                    }
                    list.css({'top':0}).animate({'top': '-' + trHeight +'px'}, function(){
                        list.css({'top': 0});
                        item.remove();
                    });
                break;
                case "down":
                    var item = tbody.find('> tr:last-child');
                    var itemClone = item.clone();
                    tbody.prepend(itemClone);
                    list.css({'bottom':0}).animate({'bottom': '-' + trHeight +'px'}, function(){
                        list.css({'bottom': 0});
                        item.remove();
                    });
                break;
            }
        }
        var timer;
        var timerStart = function(){
            timer = setInterval(function(){
                action();
            },delay );
        }
        timerStart();
        this.wrap.mouseenter(function(){
            clearTimeout(timer);
        });
        this.wrap.mouseleave(function(){
            timerStart();
        });
    }
}
$(function(){
    /*
        메인 > 자유 게시판 롤링 옵션 설정
        - direction : up(위로)
        - delay : 타이머(기본 5초 == 5000)
        - view : 보여질 개수
    */
    $("#boardVerticalSlide_1").boardVerSlide({
        direction : 'up',
        delay : 3000,
        view : 5
    });
});

 

롤링 옵션 설정 변경하기

boardVerSlide.js 에서 롤링 옵션 설정 부분을 변경하면 롤링되는 시간과 보여지는 아이템 개수를 수정할 수 있어요.

이 때, view :5 의 숫자와 게시판 모듈의 $count = 5 변수의 숫자가 동일해야 해요.

JS 파일 - boardVerSlide.js

#상단생략
 
$(function(){
    /*
        메인 > 자유 게시판 롤링 옵션 설정
        - direction : up(위로)
        - delay : 타이머(기본 5초 == 5000)
        - view : 보여질 개수
    */
    $("#boardVerticalSlide_2").boardVerSlide({
        direction : 'up',
        delay : 3000,
        view : 5
    });
});

html 파일 - index.html

#
상단생략
 
               <tbody module="board_list_5">
                <!--
                    $count = 5
                    $main_list = yes
                    $subject_cut = 25
                    $main_list_reply_view = no
                -->
                <tr>

 

다수의 게시판에 활용하기

롤링 스크립트를 다수의 게시판에 활용하는 방법이에요. boardVerSlide.js 의 아래 소스 부분을 복사해서 추가로 붙여넣어 주세요.

붙여넣은 소스에서 #boardVerSlide_1 이 값을 #boardVerSlide_2 또는 #boardVerSlide_3으로 변경해주세요.

JS 파일 - boardVerSlide.js

... 생략
/* ***** 복사 ***** */
$(function(){
    /*
        메인 > 자유 게시판 롤링 옵션 설정
        - direction : up(위로)
        - delay : 타이머(기본 5초 == 5000)
        - view : 보여질 개수
    */
    $("#boardVerticalSlide_1").boardVerSlide({
        direction : 'up',
        delay : 3000,
        view : 5
    });
}); /* ***** 복사 ***** */
/* ***** 붙여넣기 ***** */
$(function(){
    /*
        메인 > 자유 게시판 롤링 옵션 설정
        - direction : up(위로)
        - delay : 타이머(기본 5초 == 5000)
        - view : 보여질 개수
    */
    $("#boardVerticalSlide_2").boardVerSlide({
        direction : 'up',
        delay : 3000,
        view : 5
    });
});

 

롤링 효과를 적용하고 싶은 게시판 모듈에 추가한 id값을 넣어 주세요.
이와 같이 소스를 추가하면 2개의 게시판 목록에 롤링 효과가 적용되어요.

<div id="boardArea">
    <!--@css(/css/module/layout/boardVerSlide.css)-->
    <!--@js(/js/module/layout/boardVerSlide.js)-->    
    <div id="boardVerticalSlide_2" module="board_listpackage_5">
이 페이지가 도움이 되었나요?
현재 콘텐츠