[jQuery/PlugIn]이미지 자동으로 넘기는 cycle 플러그인 활용기.<이미지슬라이더>

[jQuery플러그인] 사진 자동으로 넘기는 cycle 활용하기.

 

jQuery 플러그인 cycle에 대해서 알아 보겠습니다.

요즘 모바일이다 html5다 해서 플래시 비중이 많이 줄어 들었는데요. 그에 대비해서 jquery를 활용한 수많은 플러그인들이 쏟아져 나오고 있습니다. index 화면 구성시 제일 많이 사용 하는게 사진 돌리기 입니다.

 

이 함수로 인해 비동기로 사진을 불러와 여러 사진을 돌려가며 보여 질 수 있고,

그 사진을 그냥 보는게 아니라 animation 효과를 넣어서 좀더 부드럽고 이쁘게 보여질 수 있습니다.

 

이런 기능을 하는 다른 플러그인도 많지만 전 그중 cycle 플러그인이 제일 가볍다 생각하여 자주 사용하곤 합니다.

홈페이지를 다시 방문해보니 cycle2 도 나왔던데요!

 

뭐 사용제한은 donate 입니다.개발해주신 분께 beer를 쏘고 싶으신분은 쏘셔도 될듯?

저는 이걸로 대시보드를 만들때 사용하였습니다. 한눈에 정보들은 보여주긴 해야하는데

너무 많은 정보들이라 스크롤내리게 하긴 싫고 한페이지에 다 보여주려고 여러 정보들을 interval 시켜서 보여준 기억이 납니다.

아주 유용하게 썼습니다.

 

 

아래 사진은 여러 기능들의 옵션들 입니다. 사용방법은 간단해요!!

해당 메인 홈페이지를 방문하시면 여러가지 효과를 테스트 해볼 수 있도록 해놔서 더 보기 좋습니다.

링크: http://www.malsup.com/jquery/cycle/

 

 

how to use ?

 

사용방법을 알아 보겠습니다. 일단 이 플러그인을 설치를 해야겠지요?

아래 첨부파일을 받으시거나, 해당 홈페이지에 방문하시면 됩니다.

 

jquery.cycle.all.js

 

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

<script type="text/javascript" src="/js/jquery.cycle.all.js"></script>

<script type="text/javascript">

          var getCycle = function(classVal){
               $("."+classVal).cycle({
                    fx: 'scrollHorz', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
                    speed:  'slow',
                    timeout: 1000,
                    autostop: 0,
                    next:   '#next2',
                    prev:   '#prev2',
                    pause:   1
               });
          };

getCycle(goCycle);

</script>

 

<div class='goCycle'>반복시킬 것들 block 단위로 넣어주세요</div> 

 

 

반복시키실 엘리먼트(div)를 선택하셔서 실행하시면 됩니다.

speed는 숫자로 입력하셔도 되구요.

next,prev는 사진을 강제로 왼쪽,오른쪽 넘기는 버튼들 인데요.

디자인을 알아서 만드시고 그 버튼에 id를 박고 저 곳에 넣어주시면 됩니다.