[ jQuery Plugin / jCarousel ] 아주쉬은 image navigation, jCarousellite 사용하기

web 작업을 하다 보면, 이미지 스크롤링을 해야 되는경우가 종종 있습니다... (영어로는 Carousel 이라고 하는것 같습니다)

지금까지 그때,그때 처리 하다보니, 기억나는게 별로 없군요.

그래서...

까먹을것을 대비해서 오늘 처리한 내용을 대충 정리해 둡니다.

개발자 사이트 : http://www.gmarwaha.com/jquery/jcarousellite/?#what

개발자 사이트에 가보시면 여러 옵션, 설치 등등 자세히 설명이 잘 되어 있군요... 참 감사한 일이요.. twit 도 2개 날려주는센스를 발위 했습니다. ㅋ

저의 경우 아래와 같이 include 하여 사용 준비 OK

[ jCarousel jQuery Plugin Install ]

<script type="text/javascript" src="/------/js/jcarousellite_1.0.1.pack.js" charset="utf-8"></script>

[ HTML Part ]

<table>

<tr>

   <td><a href="#" id="prevBtn"></td>

   <td>

<ul id="containter_id">

   <li><img src="이미지소스"/>

   <li><img src=""/>

   <li><img src=""/>

   <li><img src=""/>

   <li><img src=""/>

</ul>

   </td>

   <td><a href="#" id="nextBtn"></td>

</tr>

</table>

[ Script Part ]

$('#containter_id').jCarouselLite({

        btnNext: "#prevBtn",

        btnPrev: "#nextBtn",

        visible: 3

    });

[ 설 명 ]
먼저 특정 영역에 <ul id="콘테이너"><li><img></li><li><img/></li>....</ul> 로 이미지 리스트를 만드세요.

그리고 아래와 같이 그부분을 jCarouselLite 로 연결 해 주면 만사 OK..
----------------------------------------------------------------------------

$('container_selector').jCarouselLite({

        btnNext: "next button selector",

        btnPrev: "previous button selector",

        visible: 표시할이미지갯수

    });

----------------------------------------------------------------------------

파라미터 btnNext, btnPrev 는 좌우 버튼으로 사용할 영역 selector 이고, 

visible 은 화면에 보일 이미지의 갯수 입니다.

고정영역 사이즈가 아니라면 대중 parent container 의 width 를 구하고 그 안에 들어가는 이미지 width로 나누면 될것 같군요.

일단 결과 부터...

[ 아래는 제가 하는 프로젝트에서 코딩한 실제 예제 입니다. ]

javascript : 아래 html 에 있는 '#twitter00_streams_photos' 에다 이미지 carousel 을

 적용하는 코드임 잡다한게 많이 걸려 있네요.. 대강 무시 하세요

-----------------------------------------------------------------------------------------------------------

    drawStreams : function(data){

if($('#twitter00_streams_num') != null) $('#twitter00_streams_num').text(data.list.length);

if($('#twitter01_streams_num') != null) $('#twitter01_streams_num').text(data.list.length);

if($('#twitter00_streams_photos') != null) {

$('#twitter00_streams_photos').empty();

var buf = "<ul>";

for(var i=0; i<data.list.length; i++) {

var ret    = twitterPortlet.parseRelationVO (data.list[i].fields);

var imgSrc = twitterPortlet.getPictureURL( ret.pictureId );

var gap    = "<span style='width: 5px;'>&nbsp;</span>"

buf += '<li><a title=\"'+ ret.userName +'\" href="javascript:twitterPortlet.GoUser(\''+ ret.timelineId +'\')"><img src="'+imgSrc+'" border="0" width="32" height="32"/></a>'+gap+'</li>';

}

buf += "</ul>";

$('#twitter00_streams_photos').append(buf);

// 여기가 중요 !

$('#twitter00_streams_photos').jCarouselLite({

       btnNext: "#stream_next",

       btnPrev: "#stream_prev",

       visible: Math.ceil( $('#streamPhotoTable').width()/50 ) 

   });

}

}

HTML 파트 (현재 트위터 개발중입니다.. 아래는 그 일부)

-----------------------------------------------------------------------------------------------------

<div>

   <div><h3>Streams <span id="twitter00_streams_num"></span></h3></div>

   <table width="100%"  id="streamPhotoTable">

       <tr>

       

  <td width="50"><a id="stream_prev" href="#" class="btn btn_s_white" style="margin-top:-2em"><span>&lt;&lt;</span></a></td>

  <td width="*" ><div  id="twitter00_streams_photos"  style="height: 50px; float: right; padding:0 15 0 15;"></div></td>

  <td width="50"><a id="stream_next" href="#" class="btn btn_s_white" style="margin-top:-2em"><span>&gt;&gt;</span></a></td>

       </tr>

   </table>   

</div>