| 7272 |
amit.gupta |
1 |
/*
|
|
|
2 |
* loopedSlider 0.5.6 - jQuery plugin
|
|
|
3 |
* written by Nathan Searles
|
|
|
4 |
* http://nathansearles.com/loopedslider/
|
|
|
5 |
*
|
|
|
6 |
* Copyright (c) 2009 Nathan Searles (http://nathansearles.com/)
|
|
|
7 |
* Dual licensed under the MIT (MIT-LICENSE.txt)
|
|
|
8 |
* and GPL (GPL-LICENSE.txt) licenses.
|
|
|
9 |
*
|
|
|
10 |
* Built for jQuery library
|
|
|
11 |
* http://jquery.com
|
|
|
12 |
* Compatible with jQuery 1.3.2+
|
|
|
13 |
*
|
|
|
14 |
*/
|
|
|
15 |
|
|
|
16 |
/*
|
|
|
17 |
* markup example for $("#loopedSlider").loopedSlider();
|
|
|
18 |
*
|
|
|
19 |
* <div id="loopedSlider">
|
|
|
20 |
* <div class="container">
|
|
|
21 |
* <div class="slides">
|
|
|
22 |
* <div><img src="01.jpg" alt="" /></div>
|
|
|
23 |
* <div><img src="02.jpg" alt="" /></div>
|
|
|
24 |
* <div><img src="03.jpg" alt="" /></div>
|
|
|
25 |
* <div><img src="04.jpg" alt="" /></div>
|
|
|
26 |
* </div>
|
|
|
27 |
* </div>
|
|
|
28 |
* <a href="#" class="previous">previous</a>
|
|
|
29 |
* <a href="#" class="next">next</a>
|
|
|
30 |
* </div>
|
|
|
31 |
*
|
|
|
32 |
*/
|
|
|
33 |
|
|
|
34 |
if(typeof jQuery != 'undefined') {
|
|
|
35 |
jQuery(function($) {
|
|
|
36 |
$.fn.extend({
|
|
|
37 |
loopedSlider: function(options) {
|
|
|
38 |
var settings = $.extend({}, $.fn.loopedSlider.defaults, options);
|
|
|
39 |
|
|
|
40 |
return this.each(
|
|
|
41 |
function() {
|
|
|
42 |
if($.fn.jquery < '1.3.2') {return;}
|
|
|
43 |
var $t = $(this);
|
|
|
44 |
var o = $.metadata ? $.extend({}, settings, $t.metadata()) : settings;
|
|
|
45 |
|
|
|
46 |
var distance = 0;
|
|
|
47 |
var times = 1;
|
|
|
48 |
var slides = $(o.slides,$t).children().size();
|
|
|
49 |
var width = $(o.slides,$t).children().outerWidth();
|
|
|
50 |
var position = 0;
|
|
|
51 |
var active = false;
|
|
|
52 |
var number = 0;
|
|
|
53 |
var interval = 0;
|
|
|
54 |
var restart = 0;
|
|
|
55 |
var pagination = $("."+o.pagination+" li a",$t);
|
|
|
56 |
|
|
|
57 |
if(o.addPagination && !$(pagination).length){
|
|
|
58 |
var buttons = slides;
|
|
|
59 |
$($t).append("<ul class="+o.pagination+">");
|
|
|
60 |
$(o.slides,$t).children().each(function(){
|
|
|
61 |
if (number<buttons) {
|
|
|
62 |
$("."+o.pagination,$t).append("<li><a rel="+(number+1)+" href=\"#\" >"+(number+1)+"</a></li>");
|
|
|
63 |
number = number+1;
|
|
|
64 |
} else {
|
|
|
65 |
number = 0;
|
|
|
66 |
return false;
|
|
|
67 |
}
|
|
|
68 |
$("."+o.pagination+" li a:eq(0)",$t).parent().addClass("active");
|
|
|
69 |
});
|
|
|
70 |
pagination = $("."+o.pagination+" li a",$t);
|
|
|
71 |
} else {
|
|
|
72 |
$(pagination,$t).each(function(){
|
|
|
73 |
number=number+1;
|
|
|
74 |
$(this).attr("rel",number);
|
|
|
75 |
$(pagination.eq(0),$t).parent().addClass("active");
|
|
|
76 |
});
|
|
|
77 |
}
|
|
|
78 |
|
|
|
79 |
if (slides===1) {
|
|
|
80 |
$(o.slides,$t).children().css({position:"absolute",left:position,display:"block"});
|
|
|
81 |
return;
|
|
|
82 |
}
|
|
|
83 |
|
|
|
84 |
$(o.slides,$t).css({width:(slides*width)});
|
|
|
85 |
|
|
|
86 |
$(o.slides,$t).children().each(function(){
|
|
|
87 |
$(this).css({position:"absolute",left:position,display:"block"});
|
|
|
88 |
position=position+width;
|
|
|
89 |
});
|
|
|
90 |
|
|
|
91 |
$(o.slides,$t).children(":eq("+(slides-1)+")").css({position:"absolute",left:-width});
|
|
|
92 |
|
|
|
93 |
if (slides>3) {
|
|
|
94 |
$(o.slides,$t).children(":eq("+(slides-1)+")").css({position:"absolute",left:-width});
|
|
|
95 |
}
|
|
|
96 |
|
|
|
97 |
if(o.autoHeight){autoHeight(times);}
|
|
|
98 |
|
|
|
99 |
$(".next",$t).click(function(){
|
|
|
100 |
if(active===false) {
|
|
|
101 |
animate("next",true);
|
|
|
102 |
if(o.autoStart){
|
|
|
103 |
if (o.restart) {autoStart();}
|
|
|
104 |
else {clearInterval(sliderIntervalID);}
|
|
|
105 |
}
|
|
|
106 |
} return false;
|
|
|
107 |
});
|
|
|
108 |
|
|
|
109 |
$(".previous",$t).click(function(){
|
|
|
110 |
if(active===false) {
|
|
|
111 |
animate("prev",true);
|
|
|
112 |
if(o.autoStart){
|
|
|
113 |
if (o.restart) {autoStart();}
|
|
|
114 |
else {clearInterval(sliderIntervalID);}
|
|
|
115 |
}
|
|
|
116 |
} return false;
|
|
|
117 |
});
|
|
|
118 |
|
|
|
119 |
if (o.containerClick) {
|
|
|
120 |
$(o.container,$t).click(function(){
|
|
|
121 |
if(active===false) {
|
|
|
122 |
animate("next",true);
|
|
|
123 |
if(o.autoStart){
|
|
|
124 |
if (o.restart) {autoStart();}
|
|
|
125 |
else {clearInterval(sliderIntervalID);}
|
|
|
126 |
}
|
|
|
127 |
} return false;
|
|
|
128 |
});
|
|
|
129 |
}
|
|
|
130 |
|
|
|
131 |
$(pagination,$t).click(function(){
|
|
|
132 |
if ($(this).parent().hasClass("active")) {return false;}
|
|
|
133 |
else {
|
|
|
134 |
times = $(this).attr("rel");
|
|
|
135 |
$(pagination,$t).parent().siblings().removeClass("active");
|
|
|
136 |
$(this).parent().addClass("active");
|
|
|
137 |
animate("fade",times);
|
|
|
138 |
if(o.autoStart){
|
|
|
139 |
if (o.restart) {autoStart();}
|
|
|
140 |
else {clearInterval(sliderIntervalID);}
|
|
|
141 |
}
|
|
|
142 |
} return false;
|
|
|
143 |
});
|
|
|
144 |
|
|
|
145 |
if (o.autoStart) {
|
|
|
146 |
sliderIntervalID = setInterval(function(){
|
|
|
147 |
if(active===false) {animate("next",true);}
|
|
|
148 |
},o.autoStart);
|
|
|
149 |
function autoStart() {
|
|
|
150 |
if (o.restart) {
|
|
|
151 |
clearInterval(sliderIntervalID);
|
|
|
152 |
clearInterval(interval);
|
|
|
153 |
clearTimeout(restart);
|
|
|
154 |
restart = setTimeout(function() {
|
|
|
155 |
interval = setInterval( function(){
|
|
|
156 |
animate("next",true);
|
|
|
157 |
},o.autoStart);
|
|
|
158 |
},o.restart);
|
|
|
159 |
} else {
|
|
|
160 |
sliderIntervalID = setInterval(function(){
|
|
|
161 |
if(active===false) {animate("next",true);}
|
|
|
162 |
},o.autoStart);
|
|
|
163 |
}
|
|
|
164 |
};
|
|
|
165 |
}
|
|
|
166 |
|
|
|
167 |
function current(times) {
|
|
|
168 |
if(times===slides+1){times = 1;}
|
|
|
169 |
if(times===0){times = slides;}
|
|
|
170 |
$(pagination,$t).parent().siblings().removeClass("active");
|
|
|
171 |
$(pagination+"[rel='" + (times) + "']",$t).parent().addClass("active");
|
|
|
172 |
};
|
|
|
173 |
|
|
|
174 |
function autoHeight(times) {
|
|
|
175 |
if(times===slides+1){times=1;}
|
|
|
176 |
if(times===0){times=slides;}
|
|
|
177 |
var getHeight = $(o.slides,$t).children(":eq("+(times-1)+")",$t).outerHeight();
|
|
|
178 |
$(o.container,$t).animate({height: getHeight},o.autoHeight);
|
|
|
179 |
};
|
|
|
180 |
|
|
|
181 |
function animate(dir,clicked){
|
|
|
182 |
active = true;
|
|
|
183 |
switch(dir){
|
|
|
184 |
case "next":
|
|
|
185 |
times = times+1;
|
|
|
186 |
distance = (-(times*width-width));
|
|
|
187 |
current(times);
|
|
|
188 |
if(o.autoHeight){autoHeight(times);}
|
|
|
189 |
if(slides<3){
|
|
|
190 |
if (times===3){$(o.slides,$t).children(":eq(0)").css({left:(slides*width)});}
|
|
|
191 |
if (times===2){$(o.slides,$t).children(":eq("+(slides-1)+")").css({position:"absolute",left:width});}
|
|
|
192 |
}
|
|
|
193 |
$(o.slides,$t).animate({left: distance}, o.slidespeed,function(){
|
|
|
194 |
if (times===slides+1) {
|
|
|
195 |
times = 1;
|
|
|
196 |
$(o.slides,$t).css({left:0},function(){$(o.slides,$t).animate({left:distance});});
|
|
|
197 |
$(o.slides,$t).children(":eq(0)").css({left:0});
|
|
|
198 |
$(o.slides,$t).children(":eq("+(slides-1)+")").css({ position:"absolute",left:-width});
|
|
|
199 |
}
|
|
|
200 |
if (times===slides) $(o.slides,$t).children(":eq(0)").css({left:(slides*width)});
|
|
|
201 |
if (times===slides-1) $(o.slides,$t).children(":eq("+(slides-1)+")").css({left:(slides*width-width)});
|
|
|
202 |
active = false;
|
|
|
203 |
});
|
|
|
204 |
break;
|
|
|
205 |
case "prev":
|
|
|
206 |
times = times-1;
|
|
|
207 |
distance = (-(times*width-width));
|
|
|
208 |
current(times);
|
|
|
209 |
if(o.autoHeight){autoHeight(times);}
|
|
|
210 |
if (slides<3){
|
|
|
211 |
if(times===0){$(o.slides,$t).children(":eq("+(slides-1)+")").css({position:"absolute",left:(-width)});}
|
|
|
212 |
if(times===1){$(o.slides,$t).children(":eq(0)").css({position:"absolute",left:0});}
|
|
|
213 |
}
|
|
|
214 |
$(o.slides,$t).animate({left: distance}, o.slidespeed,function(){
|
|
|
215 |
if (times===0) {
|
|
|
216 |
times = slides;
|
|
|
217 |
$(o.slides,$t).children(":eq("+(slides-1)+")").css({position:"absolute",left:(slides*width-width)});
|
|
|
218 |
$(o.slides,$t).css({left: -(slides*width-width)});
|
|
|
219 |
$(o.slides,$t).children(":eq(0)").css({left:(slides*width)});
|
|
|
220 |
}
|
|
|
221 |
if (times===2 ) $(o.slides,$t).children(":eq(0)").css({position:"absolute",left:0});
|
|
|
222 |
if (times===1) $(o.slides,$t).children(":eq("+ (slides-1) +")").css({position:"absolute",left:-width});
|
|
|
223 |
active = false;
|
|
|
224 |
});
|
|
|
225 |
break;
|
|
|
226 |
case "fade":
|
|
|
227 |
times = [times]*1;
|
|
|
228 |
distance = (-(times*width-width));
|
|
|
229 |
current(times);
|
|
|
230 |
if(o.autoHeight){autoHeight(times);}
|
|
|
231 |
$(o.slides,$t).children().fadeOut(o.fadespeed, function(){
|
|
|
232 |
$(o.slides,$t).css({left: distance});
|
|
|
233 |
$(o.slides,$t).children(":eq("+(slides-1)+")").css({left:slides*width-width});
|
|
|
234 |
$(o.slides,$t).children(":eq(0)").css({left:0});
|
|
|
235 |
if(times===slides){$(o.slides,$t).children(":eq(0)").css({left:(slides*width)});}
|
|
|
236 |
if(times===1){$(o.slides,$t).children(":eq("+(slides-1)+")").css({ position:"absolute",left:-width});}
|
|
|
237 |
$(o.slides,$t).children().fadeIn(o.fadespeed);
|
|
|
238 |
active = false;
|
|
|
239 |
});
|
|
|
240 |
break;
|
|
|
241 |
default:
|
|
|
242 |
break;
|
|
|
243 |
}
|
|
|
244 |
};
|
|
|
245 |
}
|
|
|
246 |
);
|
|
|
247 |
}
|
|
|
248 |
});
|
|
|
249 |
$.fn.loopedSlider.defaults = {
|
|
|
250 |
container: ".container", //Class/id of main container. You can use "#container" for an id.
|
|
|
251 |
slides: ".slides", //Class/id of slide container. You can use "#slides" for an id.
|
|
|
252 |
pagination: "pagination", //Class name of parent ul for numbered links. Don't add a "." here.
|
|
|
253 |
containerClick: true, //Click slider to goto next slide? true/false
|
|
|
254 |
autoStart: 0, //Set to positive number for true. This number will be the time between transitions.
|
|
|
255 |
restart: 0, //Set to positive number for true. Sets time until autoStart is restarted.
|
|
|
256 |
slidespeed: 300, //Speed of slide animation, 1000 = 1second.
|
|
|
257 |
fadespeed: 200, //Speed of fade animation, 1000 = 1second.
|
|
|
258 |
autoHeight: 0, //Set to positive number for true. This number will be the speed of the animation.
|
|
|
259 |
addPagination: false //Add pagination links based on content? true/false
|
|
|
260 |
};
|
|
|
261 |
});
|
|
|
262 |
}
|