그누보드 - 그누보드에 움직이는 공지사항 혹은 뉴스 띄우기

그누보드에 움직이는 공지사항 혹은 뉴스 띄우기 > 그누보드5 팁자료실

그누보드5 팁자료실

그누보드에 움직이는 공지사항 혹은 뉴스 띄우기 정보

그누보드에 움직이는 공지사항 혹은 뉴스 띄우기

본문

뉴스를 넣으실경우 관련 api를 사용해야 할듯 합니다.

https://github.com/progpars/inewsticker 를 일단 받아옵니다.

inewsticker.js

inewsticker.jquery.json

파일을 js폴더에 집어넣습니다. 안되시면 권한을 주세요 707정도 주면될듯

그다음에 head.sub.php에 아래 소스를 복붙해넣습니다.

잘 보시면 script 모여있는 곳이 있습니다. 거기에 넣으심됩니다.

대략 69번째 줄이겠내요


<script src="/js/inewsticker.js"></script>

그리고 방식이 페이드, 슬라이드, 타이핑등 3가지 방식이 있습니다.

index.html을 열어보면 데모가 있으니 보시면 되겠습니다.

원하는 방식의 소스를 원하는 위치에 넣어주세요

그리고 li부분에 원하는 내용을 집어 넣어주세요

페이드


    <h3>Fade effect</h3>
        <ul class="fade">
            <li>Hello</li>
            <li>I am mahdi khaksar from iran</li>
            <li>I am designer and programmer at progpars.com </li>
            <li>www.ijquery.ir</li>
        </ul>

슬라이드


        <h3>Slide effect</h3>
        <ul class="slide">
            <li>Hello</li>
            <li>I am mahdi khaksar from iran</li>
            <li>I am designer and programmer at progpars.com </li>
            <li>www.ijquery.ir</li>
        </ul>

타이핑


        <h3>Typing effect</h3>
        <ul class="typing">
            <li>Hello</li>
            <li>I am mahdi khaksar from iran</li>
            <li>I am designer and programmer at progpars.com </li>
            <li>www.ijquery.ir</li>
        </ul>

스크립트 부분입니다. 이부분에는 원하는 방식의 스크립트를 빼면 나머지는 지워도 상관없습니다.

스크립트는 속도 폰트패밀리 컬러 딜레이에프터만 보면될듯합니다.

속도는 speed를 수정해주시고

폰트패밀리를 수정하면 폰트글꼴이 변경되구요

컬러는 폰트 색이 변경되고

딜레이 에프터는 글씨를 표시한 이후 사라지기 전까지의 시간을 말하는것

같습니다.


<script>
$(document).ready(function() {
//페이드
    $('.fade').inewsticker({
        speed       : 3000,
        effect      : 'fade',
        dir         : 'ltr',
        font_size   : 13,
        color       : '#fff',
        font_family : 'arial',
        delay_after : 1000        
    });
//슬라이드
    $('.slide').inewsticker({
        speed       : 2500,
        effect      : 'slide',
        dir         : 'ltr',
        font_size   : 13,
        color       : '#fff',
        font_family : 'arial',
        delay_after : 1000                        
    });
//타이핑
    $('.typing').inewsticker({
        speed           : 100,
        effect          : 'typing',
        dir             : 'ltr',
        font_size       : 13,
        color           : '#fff',
        font_family     : 'arial',
        delay_after : 1000,
                
    });
});    
</script>