레이아웃 - 위젯 - 공지사항 세로롤링 위젯 만들기

메인이나 각 페이지 컨텐츠 상단에 보통 한줄씩 롤링되는 위젯을 만드는 방법입니다.

보통 carousel 스크립트를 활용하기도 합니다. bxslider, slick 등

이 글에서는 vticker.js 를 사용해서 만들어보겠습니다.

- Original Version

https://github.com/kasp3r/vTicker

- Forked/Modified Version

http://richhollis.github.io/vticker/

수정버전은 무슨 차이인지는 모르겠지만 용량이 작은 오리지널 버전을 이용해서 만들어보겠습니다.

 

1. 먼저 vticker.js 를 레이아웃에 불러옵니다.

<load target="assets/js/jquery.vticker.js" type="body" />

 

2.  html

ul#ticker

전광판 소스 샘플입니다. 아래 소스는 플래닛 모듈 글을 가져오는 소스입니다.

<div class="content">
   {@
   $w_mid = 'plusad';
   $oModuleModel = getModel('module');
   $module_srl = $oModuleModel->getModuleSrlByMid($w_mid);
   $args = new stdClass();
   $args->module_srl = $module_srl;
   $oPlusadModel = &getModel($w_mid);
   $list = $oPlusadModel->getadlist($args);
   }
   <div class="ticker_wrap">
   <ul id="ticker">
      <li>이온디는 개발자들이 행복하길 바라는 공간입니다.</li>
      <li loop="$list->data => $key, $val"><!--@if($val->ad_url)--><a href="{$val->ad_url}">{$val->ad_content}</a><!--@else-->{$val->ad_content}<!--@end--></li>
      <li><a href="{getUrl('','mid','plusad1','act','dispPlusadwrite')}" title="전광판 등록하기">오늘 하루 기분이 어떤가요? 이 곳에 여러분의 소식을 남겨주세요.</a></li>
   </ul>
   <div class="navi">
      <button class="prev" title="이전">이전</button>
      <button class="next" title="다음">다음</button>
      <button class="pause" title="일시정지">Pause</button>
     </div>
   </div>
</div>

 

3. js

//ticker 전광판
jQuery(function ($) {
    var ticker = function () {
        timer = setTimeout(function () {
            $('#ticker li:first').animate({marginTop: '-20px'}, 400, function () {
                $(this).detach().appendTo('ul#ticker').removeAttr('style');
            });
            ticker();
        }, 4000);
    };
    // 이전글 보기
    $(document).on('click', '.prev', function () {
        $('#ticker li:last').hide().prependTo($('#ticker')).slideDown();
        clearTimeout(timer);
        ticker();
        if ($('.pause').text() == 'Unpause') {
            tickerUnpause();
        }
        ;
    });

    // 다음글 보기
    // 클릭할 경우 setTimeout 을 clearTimeout 해줘야 하는데 어떻게 하지..
    // timer 를 전연변수보다 지역변수 사용하는게 나을 것 같은데 방법을 모르겠네요.
    $(document).on('click', '.next', function () {
        $('#ticker li:first').animate({marginTop: '-20px'}, 400, function () {
            $(this).detach().appendTo('ul#ticker').removeAttr('style');
        });
        clearTimeout(timer);
        ticker();
        //3 함수와 연계 시작
        if ($('.pause').text() == 'Unpause')
        {
            tickerUnpause();
        };
    });

    // 일시정지 기능
    var tickerUnpause = function () {
        $('.pause').text('Pause').removeClass('unpause');
    };

    // 3. 재생정지 함수 시작. 2와 기능 동일함.
    var tickerpause = function () {
        $('.pause').click(function () {
            $this = $(this);
            if ($this.text() == 'Pause') {
                $this.text('Unpause').toggleClass('unpause');
                clearTimeout(timer);
            }
            else {
                tickerUnpause();
                ticker(); // 이 코드를 넣어줘야 일시정지 후 클릭시 재생이 됨
            }
        });
    };
    tickerpause();

    // 마우스를 올렸을 때 재생 정지하기
    var tickerover = function (event) {
        $('#ticker').mouseover(function () {
            clearTimeout(timer);
        });
        $('#ticker').mouseout(function () {
            ticker();
        });
    };
    tickerover(); // 4 끝
    ticker();
    return false;
});

이렇게 js를 작성하신 후 아래와 같이 별도의 js 파일을 만들어서 로드하면 됩니다.

<load target="assets/js/layout.min.js" type="body" />

 

4. CSS

#ticker{height:20px;border:1px solid red;overflow:hidden;}