| 449 |
rajveer |
1 |
/*
|
|
|
2 |
* loopedSlider 0.5 - jQuery plugin
|
|
|
3 |
* written by Nathan Searles
|
|
|
4 |
* http://code.google.com/p/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 |
*
|
|
|
13 |
*/
|
|
|
14 |
|
|
|
15 |
/*
|
|
|
16 |
* markup example for $("#loopedSlider").loopedSlider();
|
|
|
17 |
*
|
|
|
18 |
* <div id="loopedSlider">
|
|
|
19 |
* <div class="container">
|
|
|
20 |
* <div class="slides">
|
|
|
21 |
* <div><img src="01.jpg" alt="" /></div>
|
|
|
22 |
* <div><img src="02.jpg" alt="" /></div>
|
|
|
23 |
* <div><img src="03.jpg" alt="" /></div>
|
|
|
24 |
* <div><img src="04.jpg" alt="" /></div>
|
|
|
25 |
* </div>
|
|
|
26 |
* </div>
|
|
|
27 |
* <a href="#" class="previous">previous</a>
|
|
|
28 |
* <a href="#" class="next">next</a>
|
|
|
29 |
* <ul class="pagination">
|
|
|
30 |
* <li><a href="#">1</a></li>
|
|
|
31 |
* <li><a href="#">2</a></li>
|
|
|
32 |
* <li><a href="#">3</a></li>
|
|
|
33 |
* <li><a href="#">4</a></li>
|
|
|
34 |
* </ul>
|
|
|
35 |
* </div>
|
|
|
36 |
*
|
|
|
37 |
*/
|
|
|
38 |
|
|
|
39 |
(function($) {
|
|
|
40 |
$.fn.loopedSlider = function(options) {
|
|
|
41 |
|
|
|
42 |
var defaults = {
|
|
|
43 |
container: '.container',
|
|
|
44 |
slides: '.slides',
|
|
|
45 |
pagination: '.pagination',
|
|
|
46 |
containerClick: true, // Click container for next slide
|
|
|
47 |
autoStart: 0, // Set to positive number for auto interval and interval time
|
|
|
48 |
slidespeed: 300, // Speed of slide animation
|
|
|
49 |
fadespeed: 300, // Speed of fade animation
|
|
|
50 |
autoHeight: false // Set to positive number for auto height and animation speed
|
|
|
51 |
};
|
|
|
52 |
|
|
|
53 |
this.each(function() {
|
|
|
54 |
|
|
|
55 |
var obj = $(this);
|
|
|
56 |
var o = $.extend(defaults, options);
|
|
|
57 |
var pagination = $(o.pagination+' li a',obj);
|
|
|
58 |
var m = 0;
|
|
|
59 |
var t = 1;
|
|
|
60 |
var s = $(o.slides,obj).children().size();
|
|
|
61 |
var w = $(o.slides,obj).children().outerWidth();
|
|
|
62 |
var p = 0;
|
|
|
63 |
var u = false;
|
|
|
64 |
var n = 0;
|
|
|
65 |
|
|
|
66 |
$(o.slides,obj).css({width:(s*w)});
|
|
|
67 |
|
|
|
68 |
$(o.slides,obj).children().each(function(){
|
|
|
69 |
$(this).css({position:'absolute',left:p,display:'block'});
|
|
|
70 |
p=p+w;
|
|
|
71 |
});
|
|
|
72 |
|
|
|
73 |
$(pagination,obj).each(function(){
|
|
|
74 |
n=n+1;
|
|
|
75 |
$(this).attr('rel',n);
|
|
|
76 |
$(pagination.eq(0),obj).parent().addClass('active');
|
|
|
77 |
});
|
|
|
78 |
|
|
|
79 |
$(o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left:-w});
|
|
|
80 |
|
|
|
81 |
if(o.autoHeight){autoHeight(t);}
|
|
|
82 |
|
|
|
83 |
$('.next',obj).click(function(){
|
|
|
84 |
if(u===false) {
|
|
|
85 |
animate('next',true);
|
|
|
86 |
if(o.autoStart){clearInterval(sliderIntervalID);}
|
|
|
87 |
} return false;
|
|
|
88 |
});
|
|
|
89 |
|
|
|
90 |
$('.previous',obj).click(function(){
|
|
|
91 |
if(u===false) {
|
|
|
92 |
animate('prev',true);
|
|
|
93 |
if(o.autoStart){clearInterval(sliderIntervalID);}
|
|
|
94 |
} return false;
|
|
|
95 |
});
|
|
|
96 |
|
|
|
97 |
if (o.containerClick) {
|
|
|
98 |
$(o.container ,obj).click(function(){
|
|
|
99 |
if(u===false) {
|
|
|
100 |
animate('next',true);
|
|
|
101 |
if(o.autoStart){clearInterval(sliderIntervalID);}
|
|
|
102 |
} return false;
|
|
|
103 |
});
|
|
|
104 |
}
|
|
|
105 |
|
|
|
106 |
$(pagination,obj).click(function(){
|
|
|
107 |
if ($(this).parent().hasClass('active')) {return false;}
|
|
|
108 |
else {
|
|
|
109 |
t = $(this).attr('rel');
|
|
|
110 |
$(pagination,obj).parent().siblings().removeClass('active');
|
|
|
111 |
$(this).parent().addClass('active');
|
|
|
112 |
animate('fade',t);
|
|
|
113 |
if(o.autoStart){clearInterval(sliderIntervalID);}
|
|
|
114 |
} return false;
|
|
|
115 |
});
|
|
|
116 |
|
|
|
117 |
if (o.autoStart) {
|
|
|
118 |
sliderIntervalID = setInterval(function(){
|
|
|
119 |
if(u===false) {animate('next',true);}
|
|
|
120 |
}, o.autoStart);
|
|
|
121 |
}
|
|
|
122 |
|
|
|
123 |
function current(t) {
|
|
|
124 |
if(t===s+1){t=1;}
|
|
|
125 |
if(t===0){t=s;}
|
|
|
126 |
$(pagination,obj).parent().siblings().removeClass('active');
|
|
|
127 |
$(pagination+'[rel="' + (t) + '"]',obj).parent().addClass('active');
|
|
|
128 |
};
|
|
|
129 |
|
|
|
130 |
function autoHeight(t) {
|
|
|
131 |
if(t===s+1){t=1;}
|
|
|
132 |
if(t===0){t=s;}
|
|
|
133 |
var getHeight = $(o.slides,obj).children(':eq('+(t-1)+')',obj).outerHeight();
|
|
|
134 |
$('.container',obj).animate({height: getHeight},o.autoHeight);
|
|
|
135 |
};
|
|
|
136 |
|
|
|
137 |
function animate(dir,clicked){
|
|
|
138 |
u = true;
|
|
|
139 |
switch(dir){
|
|
|
140 |
case 'next':
|
|
|
141 |
t = t+1;
|
|
|
142 |
m = (-(t*w-w));
|
|
|
143 |
current(t);
|
|
|
144 |
if(o.autoHeight){autoHeight(t);}
|
|
|
145 |
$(o.slides,obj).animate({left: m}, o.slidespeed,function(){
|
|
|
146 |
if (t===s+1) {
|
|
|
147 |
t = 1;
|
|
|
148 |
$(o.slides,obj).css({left:0},function(){$(o.slides,obj).animate({left:m})});
|
|
|
149 |
$(o.slides,obj).children(':eq(0)').css({left: 0});
|
|
|
150 |
$(o.slides,obj).children(':eq('+(s-1)+')').css({ position:'absolute',left:-w});
|
|
|
151 |
}
|
|
|
152 |
if (t===s) $(o.slides,obj).children(':eq(0)').css({left:(s*w)});
|
|
|
153 |
if (t===s-1) $(o.slides,obj).children(':eq('+(s-1)+')').css({left:s*w-w});
|
|
|
154 |
u = false;
|
|
|
155 |
});
|
|
|
156 |
break;
|
|
|
157 |
case 'prev':
|
|
|
158 |
t = t-1;
|
|
|
159 |
m = (-(t*w-w));
|
|
|
160 |
current(t);
|
|
|
161 |
if(o.autoHeight){autoHeight(t);}
|
|
|
162 |
$(o.slides,obj).animate({left: m}, o.slidespeed,function(){
|
|
|
163 |
if (t===0) {
|
|
|
164 |
t = s;
|
|
|
165 |
$(o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left:(s*w-w)});
|
|
|
166 |
$(o.slides,obj).css({left: -(s*w-w)});
|
|
|
167 |
$(o.slides,obj).children(':eq(0)').css({left:(s*w)});
|
|
|
168 |
}
|
|
|
169 |
if (t===2 ) $(o.slides,obj).children(':eq(0)').css({position:'absolute',left:0});
|
|
|
170 |
if (t===1) $(o.slides,obj).children(':eq('+ (s-1) +')').css({position:'absolute',left:-w});
|
|
|
171 |
u = false;
|
|
|
172 |
});
|
|
|
173 |
break;
|
|
|
174 |
case 'fade':
|
|
|
175 |
t = [t]*1;
|
|
|
176 |
m = (-(t*w-w));
|
|
|
177 |
current(t);
|
|
|
178 |
if(o.autoHeight){autoHeight(t);}
|
|
|
179 |
$(o.slides,obj).children().fadeOut(o.fadespeed, function(){
|
|
|
180 |
$(o.slides,obj).css({left: m});
|
|
|
181 |
$(o.slides,obj).children(':eq('+(s-1)+')').css({left:s*w-w});
|
|
|
182 |
$(o.slides,obj).children(':eq(0)').css({left:0});
|
|
|
183 |
if(t===s){$(o.slides,obj).children(':eq(0)').css({left:(s*w)});}
|
|
|
184 |
if(t===1){$(o.slides,obj).children(':eq('+(s-1)+')').css({ position:'absolute',left:-w});}
|
|
|
185 |
$(o.slides,obj).children().fadeIn(o.fadespeed);
|
|
|
186 |
u = false;
|
|
|
187 |
});
|
|
|
188 |
break;
|
|
|
189 |
default:
|
|
|
190 |
break;
|
|
|
191 |
}
|
|
|
192 |
};
|
|
|
193 |
});
|
|
|
194 |
};
|
|
|
195 |
})(jQuery);
|