데모 소스 파일
jsImageSliderDemo.html
좀전에 포스팅한 jsImageSlider 를 jQuery Plugin Version으로 수정 하였습니다..
여러개를 동시에 처리 할 수 있도록 내부 구조도 좀 수정 되었습니다...
(멀더, 갑자기 불밭은것 같은데.. 이유가 ~~~~ 뭔가 ???)
아래와 같이 설정 합니다.
$('div.ximg_slider').jsImageSlider({
viewSize:5
});
아래와 같이 설정 합니다.
'to-left', 'to-right' 는 현재 text 로 처리 되어 있습니다... 알맞게 수정 하시면 좋겠죠.
아래의 데모 화면은 위아래 (<div class="ximg_slider">)
두 블록을 slide 할 수 있도록 하고 있습니다. navigation button은 따로 해당 slider만 작동 되도록 조정 되었습니다.
데모 화면...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="http://code.jquery.com/jquery-1.4.2.min.js"><\/script>');</script>
대충 필요한 CSS
<style type="text/css">
/** jsSlider Default css */
/** outsider container */
ul.imglider {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px;
width: 100%;
}
/* image li element */
ul.imglider li {
float: left;
margin: 3px;
padding: 0;
width: 60px;
height: 31px;
line-height: 31px;
border: 1px solid #999;
overflow: hidden;
position: relative;
background: #e0e0e0;
display: none;
}
/** navigation button area */
.navi_to_left_btn {
border: 1px solid #999;
float: left;
cursor: pointer;
}
.navi_to_right_btn {
border: 1px solid #999;
float: right;
cursor: pointer;
}
</style>
Plugin Script
<SCRIPT LANGUAGE="JavaScript">
<!--
(function($) {
$.fn.jsImageSlider = function(o) {
// 설정을 override , 더 많은 설정을 추가할 예정 ~
o = $.extend({
viewSize: 3,
naviBtn : { toLeftSelector: ".navi_to_left_btn", toRightSelector: ".navi_to_right_btn" }
}, o || {});
// 나중에 여러 slider 간 선택을 위한 변수
data = {};
curs = {};
return this.each(function(index) {
var div = $(this), ul = $("ul", div), tLi = $("li", ul), tl = tLi.size(), v = o.viewSize;
var naviLeft = div.find(o.naviBtn.toLeftSelector), naviRight = div.find(o.naviBtn.toRightSelector);
var dataIndex = index;
ul.attr('idx',index); naviLeft.attr('idx',index); naviRight.attr('idx',index);
data[index] = ul;
curs[index] = 0;
naviLeft.click(function() {
toLeft(this);
});
naviRight.click(function() {
toRight(this);
});
showList = function() {
tLi = $("li", data[dataIndex]);
tLi.each(function(idx) {
if(idx>=curs[dataIndex] && idx<(curs[dataIndex]+v)) {
$(this).show();
}
else {
$(this).hide();
}
});
}
toLeft = function(btn) {
dataIndex = parseInt($(btn).attr('idx'));
if(curs[dataIndex] > 0) {
curs[dataIndex]--;
showList();
}
else {
// left-most, no-more
}
}
toRight = function(btn) {
dataIndex = parseInt($(btn).attr('idx'));
tLi = $("li", data[dataIndex]);
if(curs[dataIndex] < tLi.size()-v) {
curs[dataIndex]++;
showList();
}
else {
// right-most, no-more
}
}
showList();
});
};})(jQuery);
// 아래와 같이 처리 ...
$(document).ready(function() {
// 실행
$('div.ximg_slider').jsImageSlider({
viewSize:5
});
});
//-->
</SCRIPT>
DEMO HTML
<div class="ximg_slider">
<div class="navi_to_left_btn">to-left</div>
<div class="navi_to_right_btn">to-right</div>
<ul class="imglider">
<li><img src="http://a0.twimg.com/profile_images/90410047/clouds2_normal.jpg"/>
<li><img src="http://a2.twimg.com/profile_images/1171563386/headlogo_normal.jpg"/>
<li><img src="http://a0.twimg.com/profile_images/1077679198/36007_104687779581514_100001208777188_30639_1645687_n_normal.jpg"/>
<li><img src="http://a1.twimg.com/profile_images/1077033928/____normal.jpg"/>
<li><img src="http://a3.twimg.com/profile_images/1077861021/_______normal.gif"/>
<li><img src="http://a3.twimg.com/profile_images/780892420/Jihoon_Oh_normal.jpg"/>
<li><img src="http://a0.twimg.com/profile_images/1230581846/yohjini_normal.jpg"/>
<li><img src="http://a2.twimg.com/profile_images/1048988643/___2_normal.jpg"/>
<li><img src="http://a1.twimg.com/profile_images/1229808316/__110123_000_normal.jpg"/>
<li><img src="http://a0.twimg.com/profile_images/788052694/necktie_normal.jpg"/>
</ul>
</div>
<div style="height:90px;"></div>
<div class="ximg_slider">
<div class="navi_to_left_btn">to-left</div>
<div class="navi_to_right_btn">to-right</div>
<ul class="imglider">
<li><img src="http://a2.twimg.com/profile_images/1048988643/___2_normal.jpg"/>
<li><img src="http://a1.twimg.com/profile_images/1229808316/__110123_000_normal.jpg"/>
<li><img src="http://a0.twimg.com/profile_images/788052694/necktie_normal.jpg"/>
<li><img src="http://a0.twimg.com/profile_images/90410047/clouds2_normal.jpg"/>
<li><img src="http://a2.twimg.com/profile_images/1171563386/headlogo_normal.jpg"/>
<li><img src="http://a0.twimg.com/profile_images/1077679198/36007_104687779581514_100001208777188_30639_1645687_n_normal.jpg"/>
<li><img src="http://a1.twimg.com/profile_images/1077033928/____normal.jpg"/>
<li><img src="http://a3.twimg.com/profile_images/1077861021/_______normal.gif"/>
<li><img src="http://a3.twimg.com/profile_images/780892420/Jihoon_Oh_normal.jpg"/>
<li><img src="http://a0.twimg.com/profile_images/1230581846/yohjini_normal.jpg"/>
</ul>
</div>