| 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); |
|---|
