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

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


원본 입니다.

수정본입니다.

원본파일을 다운 받아 압축을 풀면 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파일을 업로드하면 됩니다. 티스토리 블로그를 예로 들었으나 일반웹페이지는 더 쉽게 적용할 수 있을겁니다. 또한 포토샵으로 이미지를 원하는대로 크기를 만들어서 작은 사이즈로 배너를 만들 수도 있습니다. 


 
저작자 표시 비영리 변경 금지
신고
BlogIcon 글쓴이입니다

오 이렇게 꾸밀수도 있군요. 감사합니다.

BlogIcon 베누시안

안녕하세요. 반갑습니다. 티스토리는 제이쿼리를 심을 수가 있어서 다양한 효과의 배너을 만들 수가 있답니다. 댓글 감사드려요.

modeisland

유용한 자료들 많이 보았습니다. 저는 제이쿼리를 처음 접하는 사람입니다.
위의 소스를 이용해서 저만의 타이틀 베너를 시도해 보았습니다. 플래시를 사용하지 않고도 플래시 효과를 낼 수 있어서 너무 좋은 데요. 저의 홈페이지 전면에 이와 같은 제이쿼리 애니메이션 타이틀 베너를 삽입하려고 하는데, 각각의 이미지에 특정 웹페지로 이동할 수 있도록 링크를 걸려고 합니다. 어디에다 웹페이지 주소들을 삽입할 수 있을 까요?

BlogIcon 베누시안

안녕하세요. 반갑습니다. 위 제이쿼리 슬라이더는 아주 기초적인 이미지 슬라이더라서 링크 기능이 없습니다. 링크기능을 사용하려면 다른 제이쿼리 슬라이더를 사용해보세요. http://martian36.tistory.com/754 이것은 링크는 가능하지만 하단에 작은 버튼을 클릭해야 링크가 가능합니다. http://martian36.tistory.com/736 이곳은 이미지에 링크가 가능합니다.

modeisland

좋은 정보 정말 감사합니다.

BlogIcon Yitzhak

인사드립니다. 물어 물어 오면 결국 베누시안님 블로그에 도달하네요. 그 만큼 자료가 많다는 이야기겠지요. 워드프레스로 아에 옮긴 후에 공부를 하는데 어렵네요. 용어도 생소한 것이 많구요. 슬라이드 설치 때문에 요즘 쪼금 고민 중 입니다.^^

BlogIcon 베누시안

안녕하세요. 반갑습니다. 오랫만이시네요. 제가 워드프레스 책을 거의 완료했는데 10월이면 나올겁니다. 책에 부록으로 워드프레스 플러그인을 올리려고 했는데 너무 많아서 블로그에 올리려고요. 그래서 원하는 슬라이더 플러그인을 아시는게 있으면 알려주세요. 설치방법을 올려드리죠. 찾아보면 슬라이더 아주 많습니다. 무료 슬라이더가 개발되면 거의 다 워드프레스용으로도 개발되죠. 위에 보이는 슬라이더도 워드프레스용이 있답니다.

http://wordpress.org/extend/plugins/wp-skitter-slideshow/

비밀댓글입니다

BlogIcon 베누시안

네 알겠습니다. 출판사 사장님은 좋아는 하시는데 저는 자신이 없네요.ㅎㅎ 테마 수정하는 부분이 CSS가 많아서 CSS를 배우는데 좋을거 같습니다.

제로니모

베누시안님 정말 친절하고 좋은글 잘 보았습니다. 덕분에 많은 도움이 되었습니다. ^^

그런데 현재 상태로는 이미지를 4개 첨부할 수 있는데, 예를들어 이미지를 10개 첨부하고 싶다면 어떤 부분을 수정해야 할까요?

BlogIcon 베누시안

li 태그가 4개 있는 그림에서 li 태그 부분을 10개로 늘려주시면 됩니다. 이미지도 추가하세요.

티스토리 툴바