1 | /* |
---|
2 | * jQuery Nivo Slider v3.2 |
---|
3 | * http://nivo.dev7studios.com |
---|
4 | * |
---|
5 | * Copyright 2012, Dev7studios |
---|
6 | * Free to use and abuse under the MIT license. |
---|
7 | * http://www.opensource.org/licenses/mit-license.php |
---|
8 | */ |
---|
9 | |
---|
10 | /** |
---|
11 | * July 25th 2012 |
---|
12 | * Damien (Mistic) Sorel |
---|
13 | * ability to stop slideshow with beforeChange (line 316) |
---|
14 | */ |
---|
15 | |
---|
16 | /** |
---|
17 | * August 3rd 2012 |
---|
18 | * Damien (Mistic) Sorel (from http://joshfester.com/differing-image-heights-in-nivo-slider) |
---|
19 | * dynamic width (lines 95 & 102 & 319-330) |
---|
20 | */ |
---|
21 | |
---|
22 | (function($) { |
---|
23 | var NivoSlider = function(element, options){ |
---|
24 | // Defaults are below |
---|
25 | var settings = $.extend({}, $.fn.nivoSlider.defaults, options); |
---|
26 | |
---|
27 | // Useful variables. Play carefully. |
---|
28 | var vars = { |
---|
29 | currentSlide: 0, |
---|
30 | currentImage: '', |
---|
31 | totalSlides: 0, |
---|
32 | running: false, |
---|
33 | paused: false, |
---|
34 | stop: false, |
---|
35 | controlNavEl: false |
---|
36 | }; |
---|
37 | |
---|
38 | // Get this slider |
---|
39 | var slider = $(element); |
---|
40 | slider.data('nivo:vars', vars).addClass('nivoSlider'); |
---|
41 | |
---|
42 | // Find our slider children |
---|
43 | var kids = slider.children(); |
---|
44 | kids.each(function() { |
---|
45 | var child = $(this); |
---|
46 | var link = ''; |
---|
47 | if(!child.is('img')){ |
---|
48 | if(child.is('a')){ |
---|
49 | child.addClass('nivo-imageLink'); |
---|
50 | link = child; |
---|
51 | } |
---|
52 | child = child.find('img:first'); |
---|
53 | } |
---|
54 | // Get img width & height |
---|
55 | var childWidth = (childWidth === 0) ? child.attr('width') : child.width(), |
---|
56 | childHeight = (childHeight === 0) ? child.attr('height') : child.height(); |
---|
57 | |
---|
58 | if(link !== ''){ |
---|
59 | link.css('display','none'); |
---|
60 | } |
---|
61 | child.css('display','none'); |
---|
62 | vars.totalSlides++; |
---|
63 | }); |
---|
64 | |
---|
65 | // If randomStart |
---|
66 | if(settings.randomStart){ |
---|
67 | settings.startSlide = Math.floor(Math.random() * vars.totalSlides); |
---|
68 | } |
---|
69 | |
---|
70 | // Set startSlide |
---|
71 | if(settings.startSlide > 0){ |
---|
72 | if(settings.startSlide >= vars.totalSlides) { settings.startSlide = vars.totalSlides - 1; } |
---|
73 | vars.currentSlide = settings.startSlide; |
---|
74 | } |
---|
75 | |
---|
76 | // Get initial image |
---|
77 | if($(kids[vars.currentSlide]).is('img')){ |
---|
78 | vars.currentImage = $(kids[vars.currentSlide]); |
---|
79 | } else { |
---|
80 | vars.currentImage = $(kids[vars.currentSlide]).find('img:first'); |
---|
81 | } |
---|
82 | |
---|
83 | // Show initial link |
---|
84 | if($(kids[vars.currentSlide]).is('a')){ |
---|
85 | $(kids[vars.currentSlide]).css('display','block'); |
---|
86 | } |
---|
87 | |
---|
88 | // Set first background |
---|
89 | var sliderImg = $('<img/>').addClass('nivo-main-image'); |
---|
90 | sliderImg.attr('src', vars.currentImage.attr('src')).show(); |
---|
91 | slider.append(sliderImg); |
---|
92 | |
---|
93 | // Detect Window Resize |
---|
94 | $(window).resize(function() { |
---|
95 | //slider.children('img').width(slider.width()); |
---|
96 | sliderImg.attr('src', vars.currentImage.attr('src')); |
---|
97 | sliderImg.stop().height('auto'); |
---|
98 | $('.nivo-slice').remove(); |
---|
99 | $('.nivo-box').remove(); |
---|
100 | }); |
---|
101 | |
---|
102 | slider.width($(kids[vars.currentSlide]).width()); |
---|
103 | |
---|
104 | //Create caption |
---|
105 | slider.append($('<div class="nivo-caption"></div>')); |
---|
106 | |
---|
107 | // Process caption function |
---|
108 | var processCaption = function(settings){ |
---|
109 | var nivoCaption = $('.nivo-caption', slider); |
---|
110 | if(vars.currentImage.attr('title') != '' && vars.currentImage.attr('title') != undefined){ |
---|
111 | var title = vars.currentImage.attr('title'); |
---|
112 | if(title.substr(0,1) == '#') title = $(title).html(); |
---|
113 | |
---|
114 | if(nivoCaption.css('display') == 'block'){ |
---|
115 | setTimeout(function(){ |
---|
116 | nivoCaption.html(title); |
---|
117 | }, settings.animSpeed); |
---|
118 | } else { |
---|
119 | nivoCaption.html(title); |
---|
120 | nivoCaption.stop().fadeIn(settings.animSpeed); |
---|
121 | } |
---|
122 | } else { |
---|
123 | nivoCaption.stop().fadeOut(settings.animSpeed); |
---|
124 | } |
---|
125 | } |
---|
126 | |
---|
127 | //Process initial caption |
---|
128 | processCaption(settings); |
---|
129 | |
---|
130 | // In the words of Super Mario "let's a go!" |
---|
131 | var timer = 0; |
---|
132 | if(!settings.manualAdvance && kids.length > 1){ |
---|
133 | timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime); |
---|
134 | } |
---|
135 | |
---|
136 | // Add Direction nav |
---|
137 | if(settings.directionNav){ |
---|
138 | slider.append('<div class="nivo-directionNav"><a class="nivo-prevNav">'+ settings.prevText +'</a><a class="nivo-nextNav">'+ settings.nextText +'</a></div>'); |
---|
139 | |
---|
140 | $(slider).on('click', 'a.nivo-prevNav', function(){ |
---|
141 | if(vars.running) { return false; } |
---|
142 | clearInterval(timer); |
---|
143 | timer = ''; |
---|
144 | vars.currentSlide -= 2; |
---|
145 | nivoRun(slider, kids, settings, 'prev'); |
---|
146 | }); |
---|
147 | |
---|
148 | $(slider).on('click', 'a.nivo-nextNav', function(){ |
---|
149 | if(vars.running) { return false; } |
---|
150 | clearInterval(timer); |
---|
151 | timer = ''; |
---|
152 | nivoRun(slider, kids, settings, 'next'); |
---|
153 | }); |
---|
154 | } |
---|
155 | |
---|
156 | // Add Control nav |
---|
157 | if(settings.controlNav){ |
---|
158 | vars.controlNavEl = $('<div class="nivo-controlNav"></div>'); |
---|
159 | slider.after(vars.controlNavEl); |
---|
160 | for(var i = 0; i < kids.length; i++){ |
---|
161 | if(settings.controlNavThumbs){ |
---|
162 | vars.controlNavEl.addClass('nivo-thumbs-enabled'); |
---|
163 | var child = kids.eq(i); |
---|
164 | if(!child.is('img')){ |
---|
165 | child = child.find('img:first'); |
---|
166 | } |
---|
167 | if(child.attr('data-thumb')) vars.controlNavEl.append('<a class="nivo-control" rel="'+ i +'"><img src="'+ child.attr('data-thumb') +'" alt="" /></a>'); |
---|
168 | } else { |
---|
169 | vars.controlNavEl.append('<a class="nivo-control" rel="'+ i +'">'+ (i + 1) +'</a>'); |
---|
170 | } |
---|
171 | } |
---|
172 | |
---|
173 | //Set initial active link |
---|
174 | $('a:eq('+ vars.currentSlide +')', vars.controlNavEl).addClass('active'); |
---|
175 | |
---|
176 | $('a', vars.controlNavEl).bind('click', function(){ |
---|
177 | if(vars.running) return false; |
---|
178 | if($(this).hasClass('active')) return false; |
---|
179 | clearInterval(timer); |
---|
180 | timer = ''; |
---|
181 | sliderImg.attr('src', vars.currentImage.attr('src')); |
---|
182 | vars.currentSlide = $(this).attr('rel') - 1; |
---|
183 | nivoRun(slider, kids, settings, 'control'); |
---|
184 | }); |
---|
185 | } |
---|
186 | |
---|
187 | //For pauseOnHover setting |
---|
188 | if(settings.pauseOnHover){ |
---|
189 | slider.hover(function(){ |
---|
190 | vars.paused = true; |
---|
191 | clearInterval(timer); |
---|
192 | timer = ''; |
---|
193 | }, function(){ |
---|
194 | vars.paused = false; |
---|
195 | // Restart the timer |
---|
196 | if(timer === '' && !settings.manualAdvance){ |
---|
197 | timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime); |
---|
198 | } |
---|
199 | }); |
---|
200 | } |
---|
201 | |
---|
202 | // Event when Animation finishes |
---|
203 | slider.bind('nivo:animFinished', function(){ |
---|
204 | sliderImg.attr('src', vars.currentImage.attr('src')); |
---|
205 | vars.running = false; |
---|
206 | // Hide child links |
---|
207 | $(kids).each(function(){ |
---|
208 | if($(this).is('a')){ |
---|
209 | $(this).css('display','none'); |
---|
210 | } |
---|
211 | }); |
---|
212 | // Show current link |
---|
213 | if($(kids[vars.currentSlide]).is('a')){ |
---|
214 | $(kids[vars.currentSlide]).css('display','block'); |
---|
215 | } |
---|
216 | // Restart the timer |
---|
217 | if(timer === '' && !vars.paused && !settings.manualAdvance){ |
---|
218 | timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime); |
---|
219 | } |
---|
220 | // Trigger the afterChange callback |
---|
221 | settings.afterChange.call(this); |
---|
222 | }); |
---|
223 | |
---|
224 | // Add slices for slice animations |
---|
225 | var createSlices = function(slider, settings, vars) { |
---|
226 | if($(vars.currentImage).parent().is('a')) $(vars.currentImage).parent().css('display','block'); |
---|
227 | $('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').width(slider.width()).css('visibility', 'hidden').show(); |
---|
228 | var sliceHeight = ($('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').parent().is('a')) ? $('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').parent().height() : $('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').height(); |
---|
229 | |
---|
230 | for(var i = 0; i < settings.slices; i++){ |
---|
231 | var sliceWidth = Math.round(slider.width()/settings.slices); |
---|
232 | |
---|
233 | if(i === settings.slices-1){ |
---|
234 | slider.append( |
---|
235 | $('<div class="nivo-slice" name="'+i+'"><img src="'+ vars.currentImage.attr('src') +'" style="position:absolute; width:'+ slider.width() +'px; height:auto; display:block !important; top:0; left:-'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px;" /></div>').css({ |
---|
236 | left:(sliceWidth*i)+'px', |
---|
237 | width:(slider.width()-(sliceWidth*i))+'px', |
---|
238 | height:sliceHeight+'px', |
---|
239 | opacity:'0', |
---|
240 | overflow:'hidden' |
---|
241 | }) |
---|
242 | ); |
---|
243 | } else { |
---|
244 | slider.append( |
---|
245 | $('<div class="nivo-slice" name="'+i+'"><img src="'+ vars.currentImage.attr('src') +'" style="position:absolute; width:'+ slider.width() +'px; height:auto; display:block !important; top:0; left:-'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px;" /></div>').css({ |
---|
246 | left:(sliceWidth*i)+'px', |
---|
247 | width:sliceWidth+'px', |
---|
248 | height:sliceHeight+'px', |
---|
249 | opacity:'0', |
---|
250 | overflow:'hidden' |
---|
251 | }) |
---|
252 | ); |
---|
253 | } |
---|
254 | } |
---|
255 | |
---|
256 | $('.nivo-slice', slider).height(sliceHeight); |
---|
257 | sliderImg.stop().animate({ |
---|
258 | height: $(vars.currentImage).height() |
---|
259 | }, settings.animSpeed); |
---|
260 | }; |
---|
261 | |
---|
262 | // Add boxes for box animations |
---|
263 | var createBoxes = function(slider, settings, vars){ |
---|
264 | if($(vars.currentImage).parent().is('a')) $(vars.currentImage).parent().css('display','block'); |
---|
265 | $('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').width(slider.width()).css('visibility', 'hidden').show(); |
---|
266 | var boxWidth = Math.round(slider.width()/settings.boxCols), |
---|
267 | boxHeight = Math.round($('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').height() / settings.boxRows); |
---|
268 | |
---|
269 | |
---|
270 | for(var rows = 0; rows < settings.boxRows; rows++){ |
---|
271 | for(var cols = 0; cols < settings.boxCols; cols++){ |
---|
272 | if(cols === settings.boxCols-1){ |
---|
273 | slider.append( |
---|
274 | $('<div class="nivo-box" name="'+ cols +'" rel="'+ rows +'"><img src="'+ vars.currentImage.attr('src') +'" style="position:absolute; width:'+ slider.width() +'px; height:auto; display:block; top:-'+ (boxHeight*rows) +'px; left:-'+ (boxWidth*cols) +'px;" /></div>').css({ |
---|
275 | opacity:0, |
---|
276 | left:(boxWidth*cols)+'px', |
---|
277 | top:(boxHeight*rows)+'px', |
---|
278 | width:(slider.width()-(boxWidth*cols))+'px' |
---|
279 | |
---|
280 | }) |
---|
281 | ); |
---|
282 | $('.nivo-box[name="'+ cols +'"]', slider).height($('.nivo-box[name="'+ cols +'"] img', slider).height()+'px'); |
---|
283 | } else { |
---|
284 | slider.append( |
---|
285 | $('<div class="nivo-box" name="'+ cols +'" rel="'+ rows +'"><img src="'+ vars.currentImage.attr('src') +'" style="position:absolute; width:'+ slider.width() +'px; height:auto; display:block; top:-'+ (boxHeight*rows) +'px; left:-'+ (boxWidth*cols) +'px;" /></div>').css({ |
---|
286 | opacity:0, |
---|
287 | left:(boxWidth*cols)+'px', |
---|
288 | top:(boxHeight*rows)+'px', |
---|
289 | width:boxWidth+'px' |
---|
290 | }) |
---|
291 | ); |
---|
292 | $('.nivo-box[name="'+ cols +'"]', slider).height($('.nivo-box[name="'+ cols +'"] img', slider).height()+'px'); |
---|
293 | } |
---|
294 | } |
---|
295 | } |
---|
296 | |
---|
297 | sliderImg.stop().animate({ |
---|
298 | height: $(vars.currentImage).height() |
---|
299 | }, settings.animSpeed); |
---|
300 | }; |
---|
301 | |
---|
302 | // Private run method |
---|
303 | var nivoRun = function(slider, kids, settings, nudge){ |
---|
304 | // Get our vars |
---|
305 | var vars = slider.data('nivo:vars'); |
---|
306 | |
---|
307 | // Trigger the lastSlide callback |
---|
308 | if(vars && (vars.currentSlide === vars.totalSlides - 1)){ |
---|
309 | settings.lastSlide.call(this); |
---|
310 | } |
---|
311 | |
---|
312 | // Stop |
---|
313 | if((!vars || vars.stop) && !nudge) { return false; } |
---|
314 | |
---|
315 | // Trigger the beforeChange callback |
---|
316 | if(settings.beforeChange.call(this) === false) { return false; } |
---|
317 | |
---|
318 | // resize the slider (don't resize for diff < 20px) |
---|
319 | if (vars.currentSlide+1 == vars.totalSlides) { |
---|
320 | next_width = $(kids[0]).width(); |
---|
321 | } |
---|
322 | else { |
---|
323 | next_width = $(kids[vars.currentSlide + 1]).width(); |
---|
324 | } |
---|
325 | if (Math.abs(next_width - slider.width()) > 20) { |
---|
326 | slider.animate({width: next_width}, 'fast', function() { nivoRun2(slider, kids, settings, nudge) }); |
---|
327 | } |
---|
328 | else { |
---|
329 | nivoRun2(slider, kids, settings, nudge); |
---|
330 | } |
---|
331 | }; |
---|
332 | |
---|
333 | var nivoRun2 = function(slider, kids, settings, nudge){ |
---|
334 | |
---|
335 | // Set current background before change |
---|
336 | if(!nudge){ |
---|
337 | sliderImg.attr('src', vars.currentImage.attr('src')); |
---|
338 | } else { |
---|
339 | if(nudge === 'prev'){ |
---|
340 | sliderImg.attr('src', vars.currentImage.attr('src')); |
---|
341 | } |
---|
342 | if(nudge === 'next'){ |
---|
343 | sliderImg.attr('src', vars.currentImage.attr('src')); |
---|
344 | } |
---|
345 | } |
---|
346 | |
---|
347 | vars.currentSlide++; |
---|
348 | // Trigger the slideshowEnd callback |
---|
349 | if(vars.currentSlide === vars.totalSlides){ |
---|
350 | vars.currentSlide = 0; |
---|
351 | settings.slideshowEnd.call(this); |
---|
352 | } |
---|
353 | if(vars.currentSlide < 0) { vars.currentSlide = (vars.totalSlides - 1); } |
---|
354 | // Set vars.currentImage |
---|
355 | if($(kids[vars.currentSlide]).is('img')){ |
---|
356 | vars.currentImage = $(kids[vars.currentSlide]); |
---|
357 | } else { |
---|
358 | vars.currentImage = $(kids[vars.currentSlide]).find('img:first'); |
---|
359 | } |
---|
360 | |
---|
361 | // Set active links |
---|
362 | if(settings.controlNav){ |
---|
363 | $('a', vars.controlNavEl).removeClass('active'); |
---|
364 | $('a:eq('+ vars.currentSlide +')', vars.controlNavEl).addClass('active'); |
---|
365 | } |
---|
366 | |
---|
367 | // Process caption |
---|
368 | processCaption(settings); |
---|
369 | |
---|
370 | // Remove any slices from last transition |
---|
371 | $('.nivo-slice', slider).remove(); |
---|
372 | |
---|
373 | // Remove any boxes from last transition |
---|
374 | $('.nivo-box', slider).remove(); |
---|
375 | |
---|
376 | var currentEffect = settings.effect, |
---|
377 | anims = ''; |
---|
378 | |
---|
379 | // Generate random effect |
---|
380 | if(settings.effect === 'random'){ |
---|
381 | anims = new Array('sliceDownRight','sliceDownLeft','sliceUpRight','sliceUpLeft','sliceUpDown','sliceUpDownLeft','fold','fade', |
---|
382 | 'boxRandom','boxRain','boxRainReverse','boxRainGrow','boxRainGrowReverse'); |
---|
383 | currentEffect = anims[Math.floor(Math.random()*(anims.length + 1))]; |
---|
384 | if(currentEffect === undefined) { currentEffect = 'fade'; } |
---|
385 | } |
---|
386 | |
---|
387 | // Run random effect from specified set (eg: effect:'fold,fade') |
---|
388 | if(settings.effect.indexOf(',') !== -1){ |
---|
389 | anims = settings.effect.split(','); |
---|
390 | currentEffect = anims[Math.floor(Math.random()*(anims.length))]; |
---|
391 | if(currentEffect === undefined) { currentEffect = 'fade'; } |
---|
392 | } |
---|
393 | |
---|
394 | // Custom transition as defined by "data-transition" attribute |
---|
395 | if(vars.currentImage.attr('data-transition')){ |
---|
396 | currentEffect = vars.currentImage.attr('data-transition'); |
---|
397 | } |
---|
398 | |
---|
399 | // Run effects |
---|
400 | vars.running = true; |
---|
401 | var timeBuff = 0, |
---|
402 | i = 0, |
---|
403 | slices = '', |
---|
404 | firstSlice = '', |
---|
405 | totalBoxes = '', |
---|
406 | boxes = ''; |
---|
407 | |
---|
408 | if(currentEffect === 'sliceDown' || currentEffect === 'sliceDownRight' || currentEffect === 'sliceDownLeft'){ |
---|
409 | createSlices(slider, settings, vars); |
---|
410 | timeBuff = 0; |
---|
411 | i = 0; |
---|
412 | slices = $('.nivo-slice', slider); |
---|
413 | if(currentEffect === 'sliceDownLeft') { slices = $('.nivo-slice', slider)._reverse(); } |
---|
414 | |
---|
415 | slices.each(function(){ |
---|
416 | var slice = $(this); |
---|
417 | slice.css({ 'top': '0px' }); |
---|
418 | if(i === settings.slices-1){ |
---|
419 | setTimeout(function(){ |
---|
420 | slice.animate({opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); }); |
---|
421 | }, (100 + timeBuff)); |
---|
422 | } else { |
---|
423 | setTimeout(function(){ |
---|
424 | slice.animate({opacity:'1.0' }, settings.animSpeed); |
---|
425 | }, (100 + timeBuff)); |
---|
426 | } |
---|
427 | timeBuff += 50; |
---|
428 | i++; |
---|
429 | }); |
---|
430 | } else if(currentEffect === 'sliceUp' || currentEffect === 'sliceUpRight' || currentEffect === 'sliceUpLeft'){ |
---|
431 | createSlices(slider, settings, vars); |
---|
432 | timeBuff = 0; |
---|
433 | i = 0; |
---|
434 | slices = $('.nivo-slice', slider); |
---|
435 | if(currentEffect === 'sliceUpLeft') { slices = $('.nivo-slice', slider)._reverse(); } |
---|
436 | |
---|
437 | slices.each(function(){ |
---|
438 | var slice = $(this); |
---|
439 | slice.css({ 'bottom': '0px' }); |
---|
440 | if(i === settings.slices-1){ |
---|
441 | setTimeout(function(){ |
---|
442 | slice.animate({opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); }); |
---|
443 | }, (100 + timeBuff)); |
---|
444 | } else { |
---|
445 | setTimeout(function(){ |
---|
446 | slice.animate({opacity:'1.0' }, settings.animSpeed); |
---|
447 | }, (100 + timeBuff)); |
---|
448 | } |
---|
449 | timeBuff += 50; |
---|
450 | i++; |
---|
451 | }); |
---|
452 | } else if(currentEffect === 'sliceUpDown' || currentEffect === 'sliceUpDownRight' || currentEffect === 'sliceUpDownLeft'){ |
---|
453 | createSlices(slider, settings, vars); |
---|
454 | timeBuff = 0; |
---|
455 | i = 0; |
---|
456 | var v = 0; |
---|
457 | slices = $('.nivo-slice', slider); |
---|
458 | if(currentEffect === 'sliceUpDownLeft') { slices = $('.nivo-slice', slider)._reverse(); } |
---|
459 | |
---|
460 | slices.each(function(){ |
---|
461 | var slice = $(this); |
---|
462 | if(i === 0){ |
---|
463 | slice.css('top','0px'); |
---|
464 | i++; |
---|
465 | } else { |
---|
466 | slice.css('bottom','0px'); |
---|
467 | i = 0; |
---|
468 | } |
---|
469 | |
---|
470 | if(v === settings.slices-1){ |
---|
471 | setTimeout(function(){ |
---|
472 | slice.animate({opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); }); |
---|
473 | }, (100 + timeBuff)); |
---|
474 | } else { |
---|
475 | setTimeout(function(){ |
---|
476 | slice.animate({opacity:'1.0' }, settings.animSpeed); |
---|
477 | }, (100 + timeBuff)); |
---|
478 | } |
---|
479 | timeBuff += 50; |
---|
480 | v++; |
---|
481 | }); |
---|
482 | } else if(currentEffect === 'fold'){ |
---|
483 | createSlices(slider, settings, vars); |
---|
484 | timeBuff = 0; |
---|
485 | i = 0; |
---|
486 | |
---|
487 | $('.nivo-slice', slider).each(function(){ |
---|
488 | var slice = $(this); |
---|
489 | var origWidth = slice.width(); |
---|
490 | slice.css({ top:'0px', width:'0px' }); |
---|
491 | if(i === settings.slices-1){ |
---|
492 | setTimeout(function(){ |
---|
493 | slice.animate({ width:origWidth, opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); }); |
---|
494 | }, (100 + timeBuff)); |
---|
495 | } else { |
---|
496 | setTimeout(function(){ |
---|
497 | slice.animate({ width:origWidth, opacity:'1.0' }, settings.animSpeed); |
---|
498 | }, (100 + timeBuff)); |
---|
499 | } |
---|
500 | timeBuff += 50; |
---|
501 | i++; |
---|
502 | }); |
---|
503 | } else if(currentEffect === 'fade'){ |
---|
504 | createSlices(slider, settings, vars); |
---|
505 | |
---|
506 | firstSlice = $('.nivo-slice:first', slider); |
---|
507 | firstSlice.css({ |
---|
508 | 'width': slider.width() + 'px' |
---|
509 | }); |
---|
510 | |
---|
511 | firstSlice.animate({ opacity:'1.0' }, (settings.animSpeed*2), '', function(){ slider.trigger('nivo:animFinished'); }); |
---|
512 | } else if(currentEffect === 'slideInRight'){ |
---|
513 | createSlices(slider, settings, vars); |
---|
514 | |
---|
515 | firstSlice = $('.nivo-slice:first', slider); |
---|
516 | firstSlice.css({ |
---|
517 | 'width': '0px', |
---|
518 | 'opacity': '1' |
---|
519 | }); |
---|
520 | |
---|
521 | firstSlice.animate({ width: slider.width() + 'px' }, (settings.animSpeed*2), '', function(){ slider.trigger('nivo:animFinished'); }); |
---|
522 | } else if(currentEffect === 'slideInLeft'){ |
---|
523 | createSlices(slider, settings, vars); |
---|
524 | |
---|
525 | firstSlice = $('.nivo-slice:first', slider); |
---|
526 | firstSlice.css({ |
---|
527 | 'width': '0px', |
---|
528 | 'opacity': '1', |
---|
529 | 'left': '', |
---|
530 | 'right': '0px' |
---|
531 | }); |
---|
532 | |
---|
533 | firstSlice.animate({ width: slider.width() + 'px' }, (settings.animSpeed*2), '', function(){ |
---|
534 | // Reset positioning |
---|
535 | firstSlice.css({ |
---|
536 | 'left': '0px', |
---|
537 | 'right': '' |
---|
538 | }); |
---|
539 | slider.trigger('nivo:animFinished'); |
---|
540 | }); |
---|
541 | } else if(currentEffect === 'boxRandom'){ |
---|
542 | createBoxes(slider, settings, vars); |
---|
543 | |
---|
544 | totalBoxes = settings.boxCols * settings.boxRows; |
---|
545 | i = 0; |
---|
546 | timeBuff = 0; |
---|
547 | |
---|
548 | boxes = shuffle($('.nivo-box', slider)); |
---|
549 | boxes.each(function(){ |
---|
550 | var box = $(this); |
---|
551 | if(i === totalBoxes-1){ |
---|
552 | setTimeout(function(){ |
---|
553 | box.animate({ opacity:'1' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); }); |
---|
554 | }, (100 + timeBuff)); |
---|
555 | } else { |
---|
556 | setTimeout(function(){ |
---|
557 | box.animate({ opacity:'1' }, settings.animSpeed); |
---|
558 | }, (100 + timeBuff)); |
---|
559 | } |
---|
560 | timeBuff += 20; |
---|
561 | i++; |
---|
562 | }); |
---|
563 | } else if(currentEffect === 'boxRain' || currentEffect === 'boxRainReverse' || currentEffect === 'boxRainGrow' || currentEffect === 'boxRainGrowReverse'){ |
---|
564 | createBoxes(slider, settings, vars); |
---|
565 | |
---|
566 | totalBoxes = settings.boxCols * settings.boxRows; |
---|
567 | i = 0; |
---|
568 | timeBuff = 0; |
---|
569 | |
---|
570 | // Split boxes into 2D array |
---|
571 | var rowIndex = 0; |
---|
572 | var colIndex = 0; |
---|
573 | var box2Darr = []; |
---|
574 | box2Darr[rowIndex] = []; |
---|
575 | boxes = $('.nivo-box', slider); |
---|
576 | if(currentEffect === 'boxRainReverse' || currentEffect === 'boxRainGrowReverse'){ |
---|
577 | boxes = $('.nivo-box', slider)._reverse(); |
---|
578 | } |
---|
579 | boxes.each(function(){ |
---|
580 | box2Darr[rowIndex][colIndex] = $(this); |
---|
581 | colIndex++; |
---|
582 | if(colIndex === settings.boxCols){ |
---|
583 | rowIndex++; |
---|
584 | colIndex = 0; |
---|
585 | box2Darr[rowIndex] = []; |
---|
586 | } |
---|
587 | }); |
---|
588 | |
---|
589 | // Run animation |
---|
590 | for(var cols = 0; cols < (settings.boxCols * 2); cols++){ |
---|
591 | var prevCol = cols; |
---|
592 | for(var rows = 0; rows < settings.boxRows; rows++){ |
---|
593 | if(prevCol >= 0 && prevCol < settings.boxCols){ |
---|
594 | /* Due to some weird JS bug with loop vars |
---|
595 | being used in setTimeout, this is wrapped |
---|
596 | with an anonymous function call */ |
---|
597 | (function(row, col, time, i, totalBoxes) { |
---|
598 | var box = $(box2Darr[row][col]); |
---|
599 | var w = box.width(); |
---|
600 | var h = box.height(); |
---|
601 | if(currentEffect === 'boxRainGrow' || currentEffect === 'boxRainGrowReverse'){ |
---|
602 | box.width(0).height(0); |
---|
603 | } |
---|
604 | if(i === totalBoxes-1){ |
---|
605 | setTimeout(function(){ |
---|
606 | box.animate({ opacity:'1', width:w, height:h }, settings.animSpeed/1.3, '', function(){ slider.trigger('nivo:animFinished'); }); |
---|
607 | }, (100 + time)); |
---|
608 | } else { |
---|
609 | setTimeout(function(){ |
---|
610 | box.animate({ opacity:'1', width:w, height:h }, settings.animSpeed/1.3); |
---|
611 | }, (100 + time)); |
---|
612 | } |
---|
613 | })(rows, prevCol, timeBuff, i, totalBoxes); |
---|
614 | i++; |
---|
615 | } |
---|
616 | prevCol--; |
---|
617 | } |
---|
618 | timeBuff += 100; |
---|
619 | } |
---|
620 | } |
---|
621 | }; |
---|
622 | |
---|
623 | // Shuffle an array |
---|
624 | var shuffle = function(arr){ |
---|
625 | for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i, 10), x = arr[--i], arr[i] = arr[j], arr[j] = x); |
---|
626 | return arr; |
---|
627 | }; |
---|
628 | |
---|
629 | // For debugging |
---|
630 | var trace = function(msg){ |
---|
631 | if(this.console && typeof console.log !== 'undefined') { console.log(msg); } |
---|
632 | }; |
---|
633 | |
---|
634 | // Start / Stop |
---|
635 | this.stop = function(){ |
---|
636 | if(!$(element).data('nivo:vars').stop){ |
---|
637 | $(element).data('nivo:vars').stop = true; |
---|
638 | trace('Stop Slider'); |
---|
639 | } |
---|
640 | }; |
---|
641 | |
---|
642 | this.start = function(){ |
---|
643 | if($(element).data('nivo:vars').stop){ |
---|
644 | $(element).data('nivo:vars').stop = false; |
---|
645 | trace('Start Slider'); |
---|
646 | } |
---|
647 | }; |
---|
648 | |
---|
649 | // Trigger the afterLoad callback |
---|
650 | settings.afterLoad.call(this); |
---|
651 | |
---|
652 | return this; |
---|
653 | }; |
---|
654 | |
---|
655 | $.fn.nivoSlider = function(options) { |
---|
656 | return this.each(function(key, value){ |
---|
657 | var element = $(this); |
---|
658 | // Return early if this element already has a plugin instance |
---|
659 | if (element.data('nivoslider')) { return element.data('nivoslider'); } |
---|
660 | // Pass options to plugin constructor |
---|
661 | var nivoslider = new NivoSlider(this, options); |
---|
662 | // Store plugin object in this element's data |
---|
663 | element.data('nivoslider', nivoslider); |
---|
664 | }); |
---|
665 | }; |
---|
666 | |
---|
667 | //Default settings |
---|
668 | $.fn.nivoSlider.defaults = { |
---|
669 | effect: 'random', |
---|
670 | slices: 15, |
---|
671 | boxCols: 8, |
---|
672 | boxRows: 4, |
---|
673 | animSpeed: 500, |
---|
674 | pauseTime: 3000, |
---|
675 | startSlide: 0, |
---|
676 | directionNav: true, |
---|
677 | controlNav: true, |
---|
678 | controlNavThumbs: false, |
---|
679 | pauseOnHover: true, |
---|
680 | manualAdvance: false, |
---|
681 | prevText: 'Prev', |
---|
682 | nextText: 'Next', |
---|
683 | randomStart: false, |
---|
684 | beforeChange: function(){}, |
---|
685 | afterChange: function(){}, |
---|
686 | slideshowEnd: function(){}, |
---|
687 | lastSlide: function(){}, |
---|
688 | afterLoad: function(){} |
---|
689 | }; |
---|
690 | |
---|
691 | $.fn._reverse = [].reverse; |
---|
692 | |
---|
693 | })(jQuery); |
---|