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