jquery.nivo.slider 图片轮播
demo.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery.nivo.slider</title> <link rel="stylesheet" type="text/css" href="css/nivo-slider.css"/> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.nivo.slider.js"></script> <script type="text/javascript"> $(function(){ //图片轮播 if ($('#slides').length > 0) { $('#slides').nivoSlider(); } }); </script> <style type="text/css"> #slides{ width:656px; margin-left:auto; margin-right:auto; margin-top:100px;} </style> </head> <body> <div id="slides" class="theme-default"> <a href="#"> <img src="images/1.jpg" width="656" height="286" alt="" class="vt"> </a> <a href="#"> <img src="images/1.jpg" width="656" height="286" alt="" class="vt"> </a> <a href="#"> <img src="images/1.jpg" width="656" height="286" alt="" class="vt"> </a> <a href="#"> <img src="images/1.jpg" width="656" height="286" alt="" class="vt"> </a> <a href="#"> <img src="images/1.jpg" width="656" height="286" alt="" class="vt"> </a> </div> </body> </html>
nivo-slider.css
.nivoSlider { position: relative; } .nivoSlider img { left: 0px; top: 0px; position: absolute; } .nivoSlider a.nivo-imageLink { margin: 0px; padding: 0px; border: 0px currentColor; left: 0px; top: 0px; width: 100%; height: 100%; display: none; position: absolute; z-index: 6; } .nivo-slice { height: 100%; display: block; position: absolute; z-index: 5; } .nivo-box { display: block; position: absolute; z-index: 5; } .nivo-caption { left: 59px; width: 270px; bottom: 112px; color: rgb(255, 255, 255); position: absolute; z-index: 8; opacity: 0.8; } .nivo-caption h1 { padding: 15px 20px; font-family: "Terminal Dosis", sans-serif; font-size: 20px; font-weight: 300; background-color: rgb(229, 52, 0); } .nivo-caption p { background: rgb(0, 0, 0); margin: 0px; padding: 10px 20px; } .nivo-caption a { display: inline !important; } .nivo-html-caption { display: none; } .nivo-directionNav a { top: 45%; position: absolute; z-index: 9; cursor: pointer; } .nivo-prevNav { left: 0px; } .nivo-nextNav { right: 0px; } .nivo-controlNav a { position: relative; z-index: 9; cursor: pointer; } .nivo-controlNav a.active { font-weight: bold; } .theme-default .nivoSlider { background: url("../images/loading.gif") no-repeat 50% 50% rgb(255, 255, 255); position: relative; } .theme-default .nivoSlider img { left: 0px; top: 0px; display: none; position: absolute; } .theme-default .nivoSlider a { border: 0px currentColor; display: block; } .theme-default .nivo-controlNav { left: 50%; bottom: 20px; margin-left: -40px; position: absolute; } .theme-default .nivo-controlNav a { background: url("../images/bullets.png") no-repeat; border: 0px currentColor; width: 22px; height: 22px; text-indent: -9999px; margin-right: 3px; float: left; display: block; } .theme-default .nivo-controlNav a.active { background-position: 0px -22px; } .theme-default .nivo-directionNav a { background: url("../images/arrows.png") no-repeat; border: 0px currentColor; width: 49px; height: 49px; text-indent: -9999px; display: block; } .theme-default a.nivo-nextNav { background-position: -49px 0px; right: 15px; } .theme-default a.nivo-prevNav { left: 15px; } .theme-default .nivo-caption { font-family: Helvetica, Arial, sans-serif; } .theme-default .nivo-caption a { color: rgb(255, 255, 255); border-bottom-color: rgb(255, 255, 255); border-bottom-width: 1px; border-bottom-style: dotted; } .theme-default .nivo-caption a:hover { color: rgb(255, 255, 255); }
jquery.nivo.slider.js
/* * jQuery Nivo Slider v2.6 * http://nivo.dev7studios.com * * Copyright 2011, Gilbert Pellegrom * Free to use and abuse under the MIT license. * http://www.opensource.org/licenses/mit-license.php * * March 2010 */ (function($) { var NivoSlider = function(element, options) { //Defaults are below var settings = $.extend({}, $.fn.nivoSlider.defaults, options); //Useful variables. Play carefully. var vars = { currentSlide: 0, currentImage: '', totalSlides: 0, randAnim: '', running: false, paused: false, stop: false }; //Get this slider var slider = $(element); slider.data('nivo:vars', vars); slider.css('position', 'relative'); slider.addClass('nivoSlider'); //Find our slider children var kids = slider.children(); kids.each(function() { var child = $(this); var link = ''; if (!child.is('img')) { if (child.is('a')) { child.addClass('nivo-imageLink'); link = child; } child = child.find('img:first'); } //Get img width & height var childWidth = child.width(); if (childWidth == 0) childWidth = child.attr('width'); var childHeight = child.height(); if (childHeight == 0) childHeight = child.attr('height'); //Resize the slider if (childWidth > slider.width()) { slider.width(childWidth); } if (childHeight > slider.height()) { slider.height(childHeight); } if (link != '') { link.css('display', 'none'); } child.css('display', 'none'); vars.totalSlides++; }); //Set startSlide if (settings.startSlide > 0) { if (settings.startSlide >= vars.totalSlides) settings.startSlide = vars.totalSlides - 1; vars.currentSlide = settings.startSlide; } //Get initial image if ($(kids[vars.currentSlide]).is('img')) { vars.currentImage = $(kids[vars.currentSlide]); } else { vars.currentImage = $(kids[vars.currentSlide]).find('img:first'); } //Show initial link if ($(kids[vars.currentSlide]).is('a')) { $(kids[vars.currentSlide]).css('display', 'block'); } //Set first background slider.css('background', 'url("' + vars.currentImage.attr('src') + '") no-repeat'); // Process caption function var processCaption = function(settings) { var nivoCaption = $('.nivo-caption', slider); if (vars.currentImage.attr('title') != '' && vars.currentImage.attr('title') != undefined) { var title = vars.currentImage.attr('title'); var heading = ""; if (title.substr(0, 1) == '#') { heading = $("h1", title).html(); title = $("p", title).html(); } if (nivoCaption.css('display') == 'block') { nivoCaption.find('h1').fadeOut(settings.animSpeed, function() { $(this).html(heading); $(this).fadeIn(settings.animSpeed); }); nivoCaption.find('p').fadeOut(settings.animSpeed, function() { $(this).html(title); $(this).fadeIn(settings.animSpeed); }); } else { nivoCaption.find('h1').html(heading); nivoCaption.find('p').html(title); } nivoCaption.fadeIn(settings.animSpeed); } else { nivoCaption.fadeOut(settings.animSpeed); } } //Process initial caption processCaption(settings); //In the words of Super Mario "let's a go!" var timer = 0; if (!settings.manualAdvance && kids.length > 1) { timer = setInterval(function() { nivoRun(slider, kids, settings, false); }, settings.pauseTime); } //Add Direction nav if (settings.directionNav) { slider.append('<div class="nivo-directionNav"><a class="nivo-prevNav">' + settings.prevText + '</a><a class="nivo-nextNav">' + settings.nextText + '</a></div>'); //Hide Direction nav if (settings.directionNavHide) { $('.nivo-directionNav', slider).hide(); slider.hover(function() { $('.nivo-directionNav', slider).show(); }, function() { $('.nivo-directionNav', slider).hide(); }); } $('a.nivo-prevNav', slider).live('click', function() { if (vars.running) return false; clearInterval(timer); timer = ''; vars.currentSlide -= 2; nivoRun(slider, kids, settings, 'prev'); }); $('a.nivo-nextNav', slider).live('click', function() { if (vars.running) return false; clearInterval(timer); timer = ''; nivoRun(slider, kids, settings, 'next'); }); } //Add Control nav if (settings.controlNav) { var nivoControl = $('<div class="nivo-controlNav"></div>'); slider.append(nivoControl); for (var i = 0; i < kids.length; i++) { if (settings.controlNavThumbs) { var child = kids.eq(i); if (!child.is('img')) { child = child.find('img:first'); } if (settings.controlNavThumbsFromRel) { nivoControl.append('<a class="nivo-control" rel="' + i + '"><img src="' + child.attr('rel') + '" alt="" /></a>'); } else { nivoControl.append('<a class="nivo-control" rel="' + i + '"><img src="' + child.attr('src').replace(settings.controlNavThumbsSearch, settings.controlNavThumbsReplace) + '" alt="" /></a>'); } } else { nivoControl.append('<a class="nivo-control" rel="' + i + '">' + (i + 1) + '</a>'); } } //Set initial active link $('.nivo-controlNav a:eq(' + vars.currentSlide + ')', slider).addClass('active'); $('.nivo-controlNav a', slider).live('click', function() { if (vars.running) return false; if ($(this).hasClass('active')) return false; clearInterval(timer); timer = ''; //alert(settings.useTransparentBg); if (settings.useTransparentBg === false) { slider.css('background', 'url("' + vars.currentImage.attr('src') + '") no-repeat'); } else { slider.css('background', 'none'); //the line above changed with this one to support alpha png images } vars.currentSlide = $(this).attr('rel') - 1; nivoRun(slider, kids, settings, 'control'); }); } //Keyboard Navigation if (settings.keyboardNav) { $(window).keypress(function(event) { //Left if (event.keyCode == '37') { if (vars.running) return false; clearInterval(timer); timer = ''; vars.currentSlide -= 2; nivoRun(slider, kids, settings, 'prev'); } //Right if (event.keyCode == '39') { if (vars.running) return false; clearInterval(timer); timer = ''; nivoRun(slider, kids, settings, 'next'); } }); } //For pauseOnHover setting if (settings.pauseOnHover) { slider.hover(function() { vars.paused = true; clearInterval(timer); timer = ''; }, function() { vars.paused = false; //Restart the timer if (timer == '' && !settings.manualAdvance) { timer = setInterval(function() { nivoRun(slider, kids, settings, false); }, settings.pauseTime); } }); } //Event when Animation finishes slider.bind('nivo:animFinished', function() { vars.running = false; //Hide child links $(kids).each(function() { if ($(this).is('a')) { $(this).css('display', 'none'); } }); //Show current link if ($(kids[vars.currentSlide]).is('a')) { $(kids[vars.currentSlide]).css('display', 'block'); } //Restart the timer if (timer == '' && !vars.paused && !settings.manualAdvance) { timer = setInterval(function() { nivoRun(slider, kids, settings, false); }, settings.pauseTime); } //Trigger the afterChange callback settings.afterChange.call(this); }); // Add slices for slice animations var createSlices = function(slider, settings, vars) { for (var i = 0; i < settings.slices; i++) { var sliceWidth = Math.round(slider.width() / settings.slices); if (i == settings.slices - 1) { slider.append( $('<div class="nivo-slice"></div>').css({ left: (sliceWidth * i) + 'px', width: (slider.width() - (sliceWidth * i)) + 'px', height: '0px', opacity: '0', background: 'url("' + vars.currentImage.attr('src') + '") no-repeat -' + ((sliceWidth + (i * sliceWidth)) - sliceWidth) + 'px 0%' }) ); } else { slider.append( $('<div class="nivo-slice"></div>').css({ left: (sliceWidth * i) + 'px', width: sliceWidth + 'px', height: '0px', opacity: '0', background: 'url("' + vars.currentImage.attr('src') + '") no-repeat -' + ((sliceWidth + (i * sliceWidth)) - sliceWidth) + 'px 0%' }) ); } } } // Add boxes for box animations var createBoxes = function(slider, settings, vars) { var boxWidth = Math.round(slider.width() / settings.boxCols); var boxHeight = Math.round(slider.height() / settings.boxRows); for (var rows = 0; rows < settings.boxRows; rows++) { for (var cols = 0; cols < settings.boxCols; cols++) { if (cols == settings.boxCols - 1) { slider.append( $('<div class="nivo-box"></div>').css({ opacity: 0, left: (boxWidth * cols) + 'px', top: (boxHeight * rows) + 'px', width: (slider.width() - (boxWidth * cols)) + 'px', height: boxHeight + 'px', background: 'url("' + vars.currentImage.attr('src') + '") no-repeat -' + ((boxWidth + (cols * boxWidth)) - boxWidth) + 'px -' + ((boxHeight + (rows * boxHeight)) - boxHeight) + 'px' }) ); } else { slider.append( $('<div class="nivo-box"></div>').css({ opacity: 0, left: (boxWidth * cols) + 'px', top: (boxHeight * rows) + 'px', width: boxWidth + 'px', height: boxHeight + 'px', background: 'url("' + vars.currentImage.attr('src') + '") no-repeat -' + ((boxWidth + (cols * boxWidth)) - boxWidth) + 'px -' + ((boxHeight + (rows * boxHeight)) - boxHeight) + 'px' }) ); } } } } // Private run method var nivoRun = function(slider, kids, settings, nudge) { //Get our vars var vars = slider.data('nivo:vars'); //Trigger the lastSlide callback if (vars && (vars.currentSlide == vars.totalSlides - 1)) { settings.lastSlide.call(this); } // Stop if ((!vars || vars.stop) && !nudge) return false; //Trigger the beforeChange callback settings.beforeChange.call(this); if (settings.useTransparentBg === false) { //Set current background before change if (!nudge) { slider.css('background', 'url("' + vars.currentImage.attr('src') + '") no-repeat'); } else { if (nudge == 'prev') { slider.css('background', 'url("' + vars.currentImage.attr('src') + '") no-repeat'); } if (nudge == 'next') { slider.css('background', 'url("' + vars.currentImage.attr('src') + '") no-repeat'); } } } else { if (!nudge) {//the block above changed with this one to support alpha png images slider.css('background', 'none'); } else { if (nudge == 'prev') { slider.css('background', 'none'); } if (nudge == 'next') { slider.css('background', 'none'); } } } vars.currentSlide++; //Trigger the slideshowEnd callback if (vars.currentSlide == vars.totalSlides) { vars.currentSlide = 0; settings.slideshowEnd.call(this); } if (vars.currentSlide < 0) vars.currentSlide = (vars.totalSlides - 1); //Set vars.currentImage if ($(kids[vars.currentSlide]).is('img')) { vars.currentImage = $(kids[vars.currentSlide]); } else { vars.currentImage = $(kids[vars.currentSlide]).find('img:first'); } //Set active links if (settings.controlNav) { $('.nivo-controlNav a', slider).removeClass('active'); $('.nivo-controlNav a:eq(' + vars.currentSlide + ')', slider).addClass('active'); } //Process caption processCaption(settings); // Remove any slices from last transition $('.nivo-slice', slider).remove(); // Remove any boxes from last transition $('.nivo-box', slider).remove(); if (settings.effect == 'random') { var anims = new Array('sliceDownRight', 'sliceDownLeft', 'sliceUpRight', 'sliceUpLeft', 'sliceUpDown', 'sliceUpDownLeft', 'fold', 'fade', 'boxRandom', 'boxRain', 'boxRainReverse', 'boxRainGrow', 'boxRainGrowReverse'); vars.randAnim = anims[Math.floor(Math.random() * (anims.length + 1))]; if (vars.randAnim == undefined) vars.randAnim = 'fade'; } //Run random effect from specified set (eg: effect:'fold,fade') if (settings.effect.indexOf(',') != -1) { var anims = settings.effect.split(','); vars.randAnim = anims[Math.floor(Math.random() * (anims.length))]; if (vars.randAnim == undefined) vars.randAnim = 'fade'; } //Run effects vars.running = true; if (settings.effect == 'sliceDown' || settings.effect == 'sliceDownRight' || vars.randAnim == 'sliceDownRight' || settings.effect == 'sliceDownLeft' || vars.randAnim == 'sliceDownLeft') { createSlices(slider, settings, vars); var timeBuff = 0; var i = 0; var slices = $('.nivo-slice', slider); if (settings.effect == 'sliceDownLeft' || vars.randAnim == 'sliceDownLeft') slices = $('.nivo-slice', slider)._reverse(); slices.each(function() { var slice = $(this); slice.css({ 'top': '0px' }); if (i == settings.slices - 1) { setTimeout(function() { slice.animate({ height: '100%', opacity: '1.0' }, settings.animSpeed, '', function() { slider.trigger('nivo:animFinished'); }); }, (100 + timeBuff)); } else { setTimeout(function() { slice.animate({ height: '100%', opacity: '1.0' }, settings.animSpeed); }, (100 + timeBuff)); } timeBuff += 50; i++; }); } else if (settings.effect == 'sliceUp' || settings.effect == 'sliceUpRight' || vars.randAnim == 'sliceUpRight' || settings.effect == 'sliceUpLeft' || vars.randAnim == 'sliceUpLeft') { createSlices(slider, settings, vars); var timeBuff = 0; var i = 0; var slices = $('.nivo-slice', slider); if (settings.effect == 'sliceUpLeft' || vars.randAnim == 'sliceUpLeft') slices = $('.nivo-slice', slider)._reverse(); slices.each(function() { var slice = $(this); slice.css({ 'bottom': '0px' }); if (i == settings.slices - 1) { setTimeout(function() { slice.animate({ height: '100%', opacity: '1.0' }, settings.animSpeed, '', function() { slider.trigger('nivo:animFinished'); }); }, (100 + timeBuff)); } else { setTimeout(function() { slice.animate({ height: '100%', opacity: '1.0' }, settings.animSpeed); }, (100 + timeBuff)); } timeBuff += 50; i++; }); } else if (settings.effect == 'sliceUpDown' || settings.effect == 'sliceUpDownRight' || vars.randAnim == 'sliceUpDown' || settings.effect == 'sliceUpDownLeft' || vars.randAnim == 'sliceUpDownLeft') { createSlices(slider, settings, vars); var timeBuff = 0; var i = 0; var v = 0; var slices = $('.nivo-slice', slider); if (settings.effect == 'sliceUpDownLeft' || vars.randAnim == 'sliceUpDownLeft') slices = $('.nivo-slice', slider)._reverse(); slices.each(function() { var slice = $(this); if (i == 0) { slice.css('top', '0px'); i++; } else { slice.css('bottom', '0px'); i = 0; } if (v == settings.slices - 1) { setTimeout(function() { slice.animate({ height: '100%', opacity: '1.0' }, settings.animSpeed, '', function() { slider.trigger('nivo:animFinished'); }); }, (100 + timeBuff)); } else { setTimeout(function() { slice.animate({ height: '100%', opacity: '1.0' }, settings.animSpeed); }, (100 + timeBuff)); } timeBuff += 50; v++; }); } else if (settings.effect == 'fold' || vars.randAnim == 'fold') { createSlices(slider, settings, vars); var timeBuff = 0; var i = 0; $('.nivo-slice', slider).each(function() { var slice = $(this); var origWidth = slice.width(); slice.css({ top: '0px', height: '100%', width: '0px' }); if (i == settings.slices - 1) { setTimeout(function() { slice.animate({ width: origWidth, opacity: '1.0' }, settings.animSpeed, '', function() { slider.trigger('nivo:animFinished'); }); }, (100 + timeBuff)); } else { setTimeout(function() { slice.animate({ width: origWidth, opacity: '1.0' }, settings.animSpeed); }, (100 + timeBuff)); } timeBuff += 50; i++; }); } else if (settings.effect == 'fade' || vars.randAnim == 'fade') { createSlices(slider, settings, vars); var firstSlice = $('.nivo-slice:first', slider); firstSlice.css({ 'height': '100%', 'width': slider.width() + 'px' }); firstSlice.animate({ opacity: '1.0' }, (settings.animSpeed * 2), '', function() { slider.trigger('nivo:animFinished'); }); } else if (settings.effect == 'slideInRight' || vars.randAnim == 'slideInRight') { createSlices(slider, settings, vars); var firstSlice = $('.nivo-slice:first', slider); firstSlice.css({ 'height': '100%', 'width': '0px', 'opacity': '1' }); firstSlice.animate({ width: slider.width() + 'px' }, (settings.animSpeed * 2), '', function() { slider.trigger('nivo:animFinished'); }); } else if (settings.effect == 'slideInLeft' || vars.randAnim == 'slideInLeft') { createSlices(slider, settings, vars); var firstSlice = $('.nivo-slice:first', slider); firstSlice.css({ 'height': '100%', 'width': '0px', 'opacity': '1', 'left': '', 'right': '0px' }); firstSlice.animate({ width: slider.width() + 'px' }, (settings.animSpeed * 2), '', function() { // Reset positioning firstSlice.css({ 'left': '0px', 'right': '' }); slider.trigger('nivo:animFinished'); }); } else if (settings.effect == 'boxRandom' || vars.randAnim == 'boxRandom') { createBoxes(slider, settings, vars); var totalBoxes = settings.boxCols * settings.boxRows; var i = 0; var timeBuff = 0; var boxes = shuffle($('.nivo-box', slider)); boxes.each(function() { var box = $(this); if (i == totalBoxes - 1) { setTimeout(function() { box.animate({ opacity: '1' }, settings.animSpeed, '', function() { slider.trigger('nivo:animFinished'); }); }, (100 + timeBuff)); } else { setTimeout(function() { box.animate({ opacity: '1' }, settings.animSpeed); }, (100 + timeBuff)); } timeBuff += 20; i++; }); } else if (settings.effect == 'boxRain' || vars.randAnim == 'boxRain' || settings.effect == 'boxRainReverse' || vars.randAnim == 'boxRainReverse' || settings.effect == 'boxRainGrow' || vars.randAnim == 'boxRainGrow' || settings.effect == 'boxRainGrowReverse' || vars.randAnim == 'boxRainGrowReverse') { createBoxes(slider, settings, vars); var totalBoxes = settings.boxCols * settings.boxRows; var i = 0; var timeBuff = 0; // Split boxes into 2D array var rowIndex = 0; var colIndex = 0; var box2Darr = new Array(); box2Darr[rowIndex] = new Array(); var boxes = $('.nivo-box', slider); if (settings.effect == 'boxRainReverse' || vars.randAnim == 'boxRainReverse' || settings.effect == 'boxRainGrowReverse' || vars.randAnim == 'boxRainGrowReverse') { boxes = $('.nivo-box', slider)._reverse(); } boxes.each(function() { box2Darr[rowIndex][colIndex] = $(this); colIndex++; if (colIndex == settings.boxCols) { rowIndex++; colIndex = 0; box2Darr[rowIndex] = new Array(); } }); // Run animation for (var cols = 0; cols < (settings.boxCols * 2); cols++) { var prevCol = cols; for (var rows = 0; rows < settings.boxRows; rows++) { if (prevCol >= 0 && prevCol < settings.boxCols) { /* Due to some weird JS bug with loop vars being used in setTimeout, this is wrapped with an anonymous function call */ (function(row, col, time, i, totalBoxes) { var box = $(box2Darr[row][col]); var w = box.width(); var h = box.height(); if (settings.effect == 'boxRainGrow' || vars.randAnim == 'boxRainGrow' || settings.effect == 'boxRainGrowReverse' || vars.randAnim == 'boxRainGrowReverse') { box.width(0).height(0); } if (i == totalBoxes - 1) { setTimeout(function() { box.animate({ opacity: '1', width: w, height: h }, settings.animSpeed / 1.3, '', function() { slider.trigger('nivo:animFinished'); }); }, (100 + time)); } else { setTimeout(function() { box.animate({ opacity: '1', width: w, height: h }, settings.animSpeed / 1.3); }, (100 + time)); } })(rows, prevCol, timeBuff, i, totalBoxes); i++; } prevCol--; } timeBuff += 100; } } } // Shuffle an array var shuffle = function(arr) { for (var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x); return arr; } // For debugging var trace = function(msg) { if (this.console && typeof console.log != "undefined") console.log(msg); } // Start / Stop this.stop = function() { if (!$(element).data('nivo:vars').stop) { $(element).data('nivo:vars').stop = true; trace('Stop Slider'); } } this.start = function() { if ($(element).data('nivo:vars').stop) { $(element).data('nivo:vars').stop = false; trace('Start Slider'); } } //Trigger the afterLoad callback settings.afterLoad.call(this); return this; }; $.fn.nivoSlider = function(options) { return this.each(function(key, value) { var element = $(this); // Return early if this element already has a plugin instance if (element.data('nivoslider')) return element.data('nivoslider'); // Pass options to plugin constructor var nivoslider = new NivoSlider(this, options); // Store plugin object in this element's data element.data('nivoslider', nivoslider); }); }; //Default settings $.fn.nivoSlider.defaults = { effect: 'random', slices: 15, boxCols: 8, boxRows: 4, animSpeed: 500, pauseTime: 5000, startSlide: 0, directionNav: true, directionNavHide: true, controlNav: true, controlNavThumbs: false, controlNavThumbsFromRel: false, controlNavThumbsSearch: '.png', controlNavThumbsReplace: '_thumb.png', keyboardNav: true, pauseOnHover: true, manualAdvance: false, captionOpacity: 0.8, prevText: 'Prev', nextText: 'Next', beforeChange: function() { }, afterChange: function() { }, slideshowEnd: function() { }, lastSlide: function() { }, afterLoad: function() { } }; $.fn._reverse = [].reverse; })(jQuery);