123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691 |
- /*
- * jQuery Nivo Slider v2.7
- * 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,
- 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++;
- });
-
- //If randomStart
- if(settings.randomStart){
- settings.startSlide = Math.floor(Math.random() * 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');
- //Create caption
- slider.append(
- $('<div class="nivo-caption"><p></p></div>').css({ display:'none', opacity:settings.captionOpacity })
- );
-
- // 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');
- if(title.substr(0,1) == '#') title = $(title).html();
- if(nivoCaption.css('display') == 'block'){
- nivoCaption.find('p').stop().fadeOut(settings.animSpeed, function(){
- $(this).html(title);
- $(this).stop().fadeIn(settings.animSpeed);
- });
- } else {
- nivoCaption.find('p').html(title);
- }
- nivoCaption.stop().fadeIn(settings.animSpeed);
- } else {
- nivoCaption.stop().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 = '';
- slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
- 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);
-
- //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');
- }
- }
- 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();
-
- var currentEffect = settings.effect;
- //Generate random effect
- if(settings.effect == 'random'){
- var anims = new Array('sliceDownRight','sliceDownLeft','sliceUpRight','sliceUpLeft','sliceUpDown','sliceUpDownLeft','fold','fade',
- 'boxRandom','boxRain','boxRainReverse','boxRainGrow','boxRainGrowReverse');
- currentEffect = anims[Math.floor(Math.random()*(anims.length + 1))];
- if(currentEffect == undefined) currentEffect = 'fade';
- }
-
- //Run random effect from specified set (eg: effect:'fold,fade')
- if(settings.effect.indexOf(',') != -1){
- var anims = settings.effect.split(',');
- currentEffect = anims[Math.floor(Math.random()*(anims.length))];
- if(currentEffect == undefined) currentEffect = 'fade';
- }
-
- //Custom transition as defined by "data-transition" attribute
- if(vars.currentImage.attr('data-transition')){
- currentEffect = vars.currentImage.attr('data-transition');
- }
-
- //Run effects
- vars.running = true;
- if(currentEffect == 'sliceDown' || currentEffect == 'sliceDownRight' || currentEffect == 'sliceDownLeft'){
- createSlices(slider, settings, vars);
- var timeBuff = 0;
- var i = 0;
- var slices = $('.nivo-slice', slider);
- if(currentEffect == '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(currentEffect == 'sliceUp' || currentEffect == 'sliceUpRight' || currentEffect == 'sliceUpLeft'){
- createSlices(slider, settings, vars);
- var timeBuff = 0;
- var i = 0;
- var slices = $('.nivo-slice', slider);
- if(currentEffect == '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(currentEffect == 'sliceUpDown' || currentEffect == 'sliceUpDownRight' || currentEffect == 'sliceUpDownLeft'){
- createSlices(slider, settings, vars);
- var timeBuff = 0;
- var i = 0;
- var v = 0;
- var slices = $('.nivo-slice', slider);
- if(currentEffect == '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(currentEffect == '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(currentEffect == '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(currentEffect == '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(currentEffect == '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(currentEffect == '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(currentEffect == 'boxRain' || currentEffect == 'boxRainReverse' || currentEffect == 'boxRainGrow' || currentEffect == '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(currentEffect == 'boxRainReverse' || currentEffect == '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(currentEffect == 'boxRainGrow' || currentEffect == '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: 3000,
- startSlide: 0,
- directionNav: true,
- directionNavHide: true,
- controlNav: true,
- controlNavThumbs: false,
- controlNavThumbsFromRel: false,
- controlNavThumbsSearch: '.jpg',
- controlNavThumbsReplace: '_thumb.jpg',
- keyboardNav: true,
- pauseOnHover: true,
- manualAdvance: false,
- captionOpacity: 0.8,
- prevText: 'Prev',
- nextText: 'Next',
- randomStart: false,
- beforeChange: function(){},
- afterChange: function(){},
- slideshowEnd: function(){},
- lastSlide: function(){},
- afterLoad: function(){}
- };
-
- $.fn._reverse = [].reverse;
-
- })(jQuery);
|