1 | (function ($) {
|
2 |
|
3 | var methods = {
|
4 |
|
5 | init : function(options) {
|
6 | var defaults = {
|
7 | indicators: true,
|
8 | height: 400,
|
9 | transition: 500,
|
10 | interval: 6000
|
11 | };
|
12 | options = $.extend(defaults, options);
|
13 |
|
14 | return this.each(function() {
|
15 |
|
16 |
|
17 |
|
18 | var $this = $(this);
|
19 | var $slider = $this.find('ul.slides').first();
|
20 | var $slides = $slider.find('li');
|
21 | var $active_index = $slider.find('.active').index();
|
22 | var $active, $indicators, $interval;
|
23 | if ($active_index != -1) { $active = $slides.eq($active_index); }
|
24 |
|
25 |
|
26 | function captionTransition(caption, duration) {
|
27 | if (caption.hasClass("center-align")) {
|
28 | caption.velocity({opacity: 0, translateY: -100}, {duration: duration, queue: false});
|
29 | }
|
30 | else if (caption.hasClass("right-align")) {
|
31 | caption.velocity({opacity: 0, translateX: 100}, {duration: duration, queue: false});
|
32 | }
|
33 | else if (caption.hasClass("left-align")) {
|
34 | caption.velocity({opacity: 0, translateX: -100}, {duration: duration, queue: false});
|
35 | }
|
36 | }
|
37 |
|
38 |
|
39 | function moveToSlide(index) {
|
40 |
|
41 | if (index >= $slides.length) index = 0;
|
42 | else if (index < 0) index = $slides.length -1;
|
43 |
|
44 | $active_index = $slider.find('.active').index();
|
45 |
|
46 |
|
47 | if ($active_index != index) {
|
48 | $active = $slides.eq($active_index);
|
49 | $caption = $active.find('.caption');
|
50 |
|
51 | $active.removeClass('active');
|
52 | $active.velocity({opacity: 0}, {duration: options.transition, queue: false, easing: 'easeOutQuad',
|
53 | complete: function() {
|
54 | $slides.not('.active').velocity({opacity: 0, translateX: 0, translateY: 0}, {duration: 0, queue: false});
|
55 | } });
|
56 | captionTransition($caption, options.transition);
|
57 |
|
58 |
|
59 |
|
60 | if (options.indicators) {
|
61 | $indicators.eq($active_index).removeClass('active');
|
62 | }
|
63 |
|
64 | $slides.eq(index).velocity({opacity: 1}, {duration: options.transition, queue: false, easing: 'easeOutQuad'});
|
65 | $slides.eq(index).find('.caption').velocity({opacity: 1, translateX: 0, translateY: 0}, {duration: options.transition, delay: options.transition, queue: false, easing: 'easeOutQuad'});
|
66 | $slides.eq(index).addClass('active');
|
67 |
|
68 |
|
69 |
|
70 | if (options.indicators) {
|
71 | $indicators.eq(index).addClass('active');
|
72 | }
|
73 | }
|
74 | }
|
75 |
|
76 |
|
77 |
|
78 | if (!$this.hasClass('fullscreen')) {
|
79 | if (options.indicators) {
|
80 |
|
81 | $this.height(options.height + 40);
|
82 | }
|
83 | else {
|
84 | $this.height(options.height);
|
85 | }
|
86 | $slider.height(options.height);
|
87 | }
|
88 |
|
89 |
|
90 |
|
91 | $slides.find('.caption').each(function () {
|
92 | captionTransition($(this), 0);
|
93 | });
|
94 |
|
95 |
|
96 | $slides.find('img').each(function () {
|
97 | var placeholderBase64 = 'data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
|
98 | if ($(this).attr('src') !== placeholderBase64) {
|
99 | $(this).css('background-image', 'url(' + $(this).attr('src') + ')' );
|
100 | $(this).attr('src', placeholderBase64);
|
101 | }
|
102 | });
|
103 |
|
104 |
|
105 | if (options.indicators) {
|
106 | $indicators = $('<ul class="indicators"></ul>');
|
107 | $slides.each(function( index ) {
|
108 | var $indicator = $('<li class="indicator-item"></li>');
|
109 |
|
110 |
|
111 | $indicator.click(function () {
|
112 | var $parent = $slider.parent();
|
113 | var curr_index = $parent.find($(this)).index();
|
114 | moveToSlide(curr_index);
|
115 |
|
116 |
|
117 | clearInterval($interval);
|
118 | $interval = setInterval(
|
119 | function(){
|
120 | $active_index = $slider.find('.active').index();
|
121 | if ($slides.length == $active_index + 1) $active_index = 0;
|
122 | else $active_index += 1;
|
123 |
|
124 | moveToSlide($active_index);
|
125 |
|
126 | }, options.transition + options.interval
|
127 | );
|
128 | });
|
129 | $indicators.append($indicator);
|
130 | });
|
131 | $this.append($indicators);
|
132 | $indicators = $this.find('ul.indicators').find('li.indicator-item');
|
133 | }
|
134 |
|
135 | if ($active) {
|
136 | $active.show();
|
137 | }
|
138 | else {
|
139 | $slides.first().addClass('active').velocity({opacity: 1}, {duration: options.transition, queue: false, easing: 'easeOutQuad'});
|
140 |
|
141 | $active_index = 0;
|
142 | $active = $slides.eq($active_index);
|
143 |
|
144 |
|
145 | if (options.indicators) {
|
146 | $indicators.eq($active_index).addClass('active');
|
147 | }
|
148 | }
|
149 |
|
150 |
|
151 | $active.find('img').each(function() {
|
152 | $active.find('.caption').velocity({opacity: 1, translateX: 0, translateY: 0}, {duration: options.transition, queue: false, easing: 'easeOutQuad'});
|
153 | });
|
154 |
|
155 |
|
156 | $interval = setInterval(
|
157 | function(){
|
158 | $active_index = $slider.find('.active').index();
|
159 | moveToSlide($active_index + 1);
|
160 |
|
161 | }, options.transition + options.interval
|
162 | );
|
163 |
|
164 |
|
165 |
|
166 |
|
167 |
|
168 | var panning = false;
|
169 | var swipeLeft = false;
|
170 | var swipeRight = false;
|
171 |
|
172 | $this.hammer({
|
173 | prevent_default: false
|
174 | }).bind('pan', function(e) {
|
175 | if (e.gesture.pointerType === "touch") {
|
176 |
|
177 |
|
178 | clearInterval($interval);
|
179 |
|
180 | var direction = e.gesture.direction;
|
181 | var x = e.gesture.deltaX;
|
182 | var velocityX = e.gesture.velocityX;
|
183 |
|
184 | $curr_slide = $slider.find('.active');
|
185 | $curr_slide.velocity({ translateX: x
|
186 | }, {duration: 50, queue: false, easing: 'easeOutQuad'});
|
187 |
|
188 |
|
189 | if (direction === 4 && (x > ($this.innerWidth() / 2) || velocityX < -0.65)) {
|
190 | swipeRight = true;
|
191 | }
|
192 |
|
193 | else if (direction === 2 && (x < (-1 * $this.innerWidth() / 2) || velocityX > 0.65)) {
|
194 | swipeLeft = true;
|
195 | }
|
196 |
|
197 |
|
198 | var next_slide;
|
199 | if (swipeLeft) {
|
200 | next_slide = $curr_slide.next();
|
201 | if (next_slide.length === 0) {
|
202 | next_slide = $slides.first();
|
203 | }
|
204 | next_slide.velocity({ opacity: 1
|
205 | }, {duration: 300, queue: false, easing: 'easeOutQuad'});
|
206 | }
|
207 | if (swipeRight) {
|
208 | next_slide = $curr_slide.prev();
|
209 | if (next_slide.length === 0) {
|
210 | next_slide = $slides.last();
|
211 | }
|
212 | next_slide.velocity({ opacity: 1
|
213 | }, {duration: 300, queue: false, easing: 'easeOutQuad'});
|
214 | }
|
215 |
|
216 |
|
217 | }
|
218 |
|
219 | }).bind('panend', function(e) {
|
220 | if (e.gesture.pointerType === "touch") {
|
221 |
|
222 | $curr_slide = $slider.find('.active');
|
223 | panning = false;
|
224 | curr_index = $slider.find('.active').index();
|
225 |
|
226 | if (!swipeRight && !swipeLeft) {
|
227 |
|
228 | $curr_slide.velocity({ translateX: 0
|
229 | }, {duration: 300, queue: false, easing: 'easeOutQuad'});
|
230 | }
|
231 | else if (swipeLeft) {
|
232 | moveToSlide(curr_index + 1);
|
233 | $curr_slide.velocity({translateX: -1 * $this.innerWidth() }, {duration: 300, queue: false, easing: 'easeOutQuad',
|
234 | complete: function() {
|
235 | $curr_slide.velocity({opacity: 0, translateX: 0}, {duration: 0, queue: false});
|
236 | } });
|
237 | }
|
238 | else if (swipeRight) {
|
239 | moveToSlide(curr_index - 1);
|
240 | $curr_slide.velocity({translateX: $this.innerWidth() }, {duration: 300, queue: false, easing: 'easeOutQuad',
|
241 | complete: function() {
|
242 | $curr_slide.velocity({opacity: 0, translateX: 0}, {duration: 0, queue: false});
|
243 | } });
|
244 | }
|
245 | swipeLeft = false;
|
246 | swipeRight = false;
|
247 |
|
248 |
|
249 | clearInterval($interval);
|
250 | $interval = setInterval(
|
251 | function(){
|
252 | $active_index = $slider.find('.active').index();
|
253 | if ($slides.length == $active_index + 1) $active_index = 0;
|
254 | else $active_index += 1;
|
255 |
|
256 | moveToSlide($active_index);
|
257 |
|
258 | }, options.transition + options.interval
|
259 | );
|
260 | }
|
261 | });
|
262 |
|
263 | $this.on('sliderPause', function() {
|
264 | clearInterval($interval);
|
265 | });
|
266 |
|
267 | $this.on('sliderStart', function() {
|
268 | clearInterval($interval);
|
269 | $interval = setInterval(
|
270 | function(){
|
271 | $active_index = $slider.find('.active').index();
|
272 | if ($slides.length == $active_index + 1) $active_index = 0;
|
273 | else $active_index += 1;
|
274 |
|
275 | moveToSlide($active_index);
|
276 |
|
277 | }, options.transition + options.interval
|
278 | );
|
279 | });
|
280 |
|
281 | $this.on('sliderNext', function() {
|
282 | $active_index = $slider.find('.active').index();
|
283 | moveToSlide($active_index + 1);
|
284 | });
|
285 |
|
286 | $this.on('sliderPrev', function() {
|
287 | $active_index = $slider.find('.active').index();
|
288 | moveToSlide($active_index - 1);
|
289 | });
|
290 |
|
291 | });
|
292 |
|
293 |
|
294 |
|
295 | },
|
296 | pause : function() {
|
297 | $(this).trigger('sliderPause');
|
298 | },
|
299 | start : function() {
|
300 | $(this).trigger('sliderStart');
|
301 | },
|
302 | next : function() {
|
303 | $(this).trigger('sliderNext');
|
304 | },
|
305 | prev : function() {
|
306 | $(this).trigger('sliderPrev');
|
307 | }
|
308 | };
|
309 |
|
310 |
|
311 | $.fn.slider = function(methodOrOptions) {
|
312 | if ( methods[methodOrOptions] ) {
|
313 | return methods[ methodOrOptions ].apply( this, Array.prototype.slice.call( arguments, 1 ));
|
314 | } else if ( typeof methodOrOptions === 'object' || ! methodOrOptions ) {
|
315 |
|
316 | return methods.init.apply( this, arguments );
|
317 | } else {
|
318 | $.error( 'Method ' + methodOrOptions + ' does not exist on jQuery.tooltip' );
|
319 | }
|
320 | };
|
321 | }( jQuery )); |
\ | No newline at end of file |