제이쿼리 슬라이더 플러그인을 이용한 애니메이션 타이틀 배너

제이쿼리는 타인이 만든 것을 손쉽게 설치할 수 있어서 사용하기 아주 편리합니다. 웹 애니미에션 프로그램으로 플래시가 많이 쓰였는데 애플 아이폰에서 플래시를 제외시키고 제이쿼리로 대체하면서 제이쿼리에 대한 관심이 높아졌습니다. 플러그인을 만들려면 제이쿼리와 자바스크립트에 대한 지식이 많아야하겠지만 어떤 프로그램을 사용하기 위해서 그 프로그램을 다 알아야 사용할 수 있는 것은 아니듯이 남이 만든 간단한 제이쿼리 플러그인을 설치할 줄만 안다면 제이쿼리를 사용할 줄 아는 것이 됩니다. 개발자들은 수없이 많고 무료로 공개되는 것이 많으며 상품성있는 좋은 플러그인은 저가에 판매되기도 합니다. 플래시는 남이 만든 것을 수정해서 사용하려면 플래시를 잘 알아야 가능하지만 제이쿼리는 플러그인 이라는 말 그대로 끼워넣기만 하면 됩니다.

이번 글에서는 jqslider라는 아주 간단한 제이쿼리 플러그인을 설치하는 방법을 알아봅니다. 

jqslider-free.zip

원본 입니다.

jqslider-수정.zip

수정본입니다.

원본파일을 다운 받아 압축을 풀면 index파일과 demo.css파일이 있고 images폴더와 jqslider폴더가 있습니다. images폴더에는  타이틀에 사용된 4개의 배너파일이 있고 jqslider에는 타이틀의 내용을 배치할 css파일인 jqslider.css, 제이쿼리 파일인 jqslider.js, 제이쿼리 라이브러리 파일인 jquery-1.4.2.min.js가 있습니다. 인터넷에 연결된 상태이면 구글 제이쿼리 라이브러리를 사용하는 것이 좋습니다.  

수정본은 블로그에 사용하기 위해서 참조 주소를 수정했습니다. 티스토리 블로그에 설치를 하려면 파일들은 모두 images폴더안에 저장해야하기 때문에 css파일과 js파일은 아래와 같이 ./images 경로로 표시해야합니다.

<!-- include these lines for jQuery Slider -->

<link rel="stylesheet" type="text/css" href="./images/jqslider.css" />

<script type="text/javascript" src="./images/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="./images/jqslider.js"></script>

<!-- end of included lines for jQuery Slider -->

이미지파일은 같은 images폴더에 저장을 하지만 블로그가 인식하려면 절대주소를 사용해야합니다. 이주소를 알아내려면 다음과 같이 관리자 화면에서 스킨탭으로 들어가서 파일업로드탭을 클릭합니다.

 

포토샵으로 자신의 사이트에 맞는 이미지를 제작하고 위의 창에서 이미지파일을 업로드한 다음에 이미지를 선택하면 왼쪽에서 썸네일을 볼 수 있는데 우클릭해서 이미지 URL복사를 클릭하면 클립보드에 저장됩니다. 메모장에 붙여넣기를 하면 저의 경우 다음과 같이 나옵니다.

 http://cfs.tistory.com/custom/blog/81/819065/skin/images/banner1.jpg

이것이 이미지가 저장된 절대주소입니다. index파일을 메모장에 열고 html코드부분을 수정해줍니다.

    <!-- *** jQuery Slider code starts *** -->

<div id="wsnSlider">

    <img src='http://cfs.tistory.com/custom/blog/81/819065/skin/images/banner1.jpg' />

        <ul class="buttons">

            <li><a href="http://cfs.tistory.com/custom/blog/81/819065/skin/images/banner1.jpg">1</a></li>

            <li><a href="http://cfs.tistory.com/custom/blog/81/819065/skin/images/banner2.jpg">2</a></li>

            <li><a href="http://cfs.tistory.com/custom/blog/81/819065/skin/images/banner3.jpg">3</a></li>

            <li><a href="http://cfs.tistory.com/custom/blog/81/819065/skin/images/banner4.jpg">4</a></li>                                  

        </ul>

</div>

<!-- *** jQuery Slider code ends *** -->

위와같이 이미지가 있는 경로를 수정해줘야 블로그에서 인식이 됩니다.

수정된 코드를 skin.html에 삽입하기 위해 HTML/CSS편집탭을 클릭하고 스크롤바를 내려서 header태그 안에 삽입합니다.

제이쿼리 라이브러리와 css 참조, 플러그인참조는 head태그 안에 위와 같이 코드를 삽입합니다. 제이쿼리 라이브러리는 구글을 사용했습니다. 

문제는 css수정입니다. jqslider.css는 다음과 같이 자신의 웹페이지 헤더의 타이틀 사이즈에 맞게 수정합니다.

/*

#wsnSlider {

position:relative;

width:1145px;

height:180px;

overflow:hidden;

font-family:Arial, Helvetica, sans-serif;

}
*/

또한 타이틀이 들어가면 헤더의 css도 달라지므로 자신의 환경에 맞게 style.css도 수정해줘야합니다.

슬라이더의 이미지 슬라이드 속도를 조절하려면 jqslider.js를 메모장에 열고 제일 하단에 속도조절하는 곳이 있습니다.

/*

$('document').ready(function () {

$('#wsnSlider').wsnSlider({interval:5000, speed:600, push:true});

});
*/
 

빨간색의 600은 밀리초이니 0.6초동안 슬라이드됩니다. 
 

이렇게 수정한 css파일과 js파일을 업로드하면 됩니다. 티스토리 블로그를 예로 들었으나 일반웹페이지는 더 쉽게 적용할 수 있을겁니다. 또한 포토샵으로 이미지를 원하는대로 크기를 만들어서 작은 사이즈로 배너를 만들 수도 있습니다.