final update
This commit is contained in:
Labality
553
Website/Nautilus.Web.Impulse/Scripts/jquery.nivo.slider.js
Normal file
553
Website/Nautilus.Web.Impulse/Scripts/jquery.nivo.slider.js
Normal file
@ -0,0 +1,553 @@
|
||||
/*
|
||||
* jQuery Nivo Slider v2.4
|
||||
* 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
|
||||
*
|
||||
* May 2010 - Pick random effect from specified set of effects by toronegro
|
||||
* May 2010 - controlNavThumbsFromRel option added by nerd-sh
|
||||
* May 2010 - Do not start nivoRun timer if there is only 1 slide by msielski
|
||||
* April 2010 - controlNavThumbs option added by Jamie Thompson (http://jamiethompson.co.uk)
|
||||
* March 2010 - manualAdvance option added by HelloPablo (http://hellopablo.co.uk)
|
||||
*/
|
||||
|
||||
(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');
|
||||
|
||||
//Add initial slices
|
||||
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' })
|
||||
);
|
||||
} else {
|
||||
slider.append(
|
||||
$('<div class="nivo-slice"></div>').css({ left:(sliceWidth*i)+'px', width:sliceWidth+'px' })
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
//Create caption
|
||||
slider.append(
|
||||
$('<div class="nivo-caption"><p></p></div>').css({ display:'none', opacity:settings.captionOpacity })
|
||||
);
|
||||
//Process initial caption
|
||||
if(vars.currentImage.attr('title') != ''){
|
||||
var title = vars.currentImage.attr('title');
|
||||
if(title.substr(0,1) == '#') title = $(title).html();
|
||||
$('.nivo-caption p', slider).html(title);
|
||||
$('.nivo-caption', slider).fadeIn(settings.animSpeed);
|
||||
}
|
||||
|
||||
//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">Prev</a><a class="nivo-nextNav">Next</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);
|
||||
});
|
||||
|
||||
// Reset slice width before animations run
|
||||
var resetSliceWidth = function(slider, settings){
|
||||
var slices = $('.nivo-slice', slider);
|
||||
var i = 0;
|
||||
slices.each(function(){
|
||||
var slice = $(this);
|
||||
var sliceWidth = Math.round(slider.width()/settings.slices);
|
||||
if(i == settings.slices-1){
|
||||
slice.css('width', (slider.width()-(sliceWidth*i)) + 'px');
|
||||
} else {
|
||||
slice.css('width', sliceWidth + 'px');
|
||||
}
|
||||
i++;
|
||||
});
|
||||
}
|
||||
|
||||
// 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 acitve links
|
||||
if(settings.controlNav){
|
||||
$('.nivo-controlNav a', slider).removeClass('active');
|
||||
$('.nivo-controlNav a:eq('+ vars.currentSlide +')', slider).addClass('active');
|
||||
}
|
||||
|
||||
//Process caption
|
||||
if(vars.currentImage.attr('title') != ''){
|
||||
var title = vars.currentImage.attr('title');
|
||||
if(title.substr(0,1) == '#') title = $(title).html();
|
||||
|
||||
if($('.nivo-caption', slider).css('display') == 'block'){
|
||||
$('.nivo-caption p', slider).fadeOut(settings.animSpeed, function(){
|
||||
$(this).html(title);
|
||||
$(this).fadeIn(settings.animSpeed);
|
||||
});
|
||||
} else {
|
||||
$('.nivo-caption p', slider).html(title);
|
||||
}
|
||||
$('.nivo-caption', slider).fadeIn(settings.animSpeed);
|
||||
} else {
|
||||
$('.nivo-caption', slider).fadeOut(settings.animSpeed);
|
||||
}
|
||||
|
||||
//Set new slice backgrounds
|
||||
var i = 0;
|
||||
$('.nivo-slice', slider).each(function(){
|
||||
var sliceWidth = Math.round(slider.width()/settings.slices);
|
||||
$(this).css({ height:'0px', opacity:'0',
|
||||
background: 'url("'+ vars.currentImage.attr('src') +'") no-repeat -'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px 0%' });
|
||||
i++;
|
||||
});
|
||||
|
||||
if(settings.effect == 'random'){
|
||||
var anims = new Array('sliceDownRight','sliceDownLeft','sliceUpRight','sliceUpLeft','sliceUpDown','sliceUpDownLeft','fold','fade','slideInRight','slideInLeft');
|
||||
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'){
|
||||
var timeBuff = 0;
|
||||
var i = 0;
|
||||
resetSliceWidth(slider, settings);
|
||||
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'){
|
||||
var timeBuff = 0;
|
||||
var i = 0;
|
||||
resetSliceWidth(slider, settings);
|
||||
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'){
|
||||
var timeBuff = 0;
|
||||
var i = 0;
|
||||
var v = 0;
|
||||
resetSliceWidth(slider, settings);
|
||||
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'){
|
||||
var timeBuff = 0;
|
||||
var i = 0;
|
||||
resetSliceWidth(slider, settings);
|
||||
$('.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'){
|
||||
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'){
|
||||
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'){
|
||||
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');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 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);
|
||||
};
|
||||
|
||||
$.fn.nivoSlider = function(options) {
|
||||
|
||||
return this.each(function(){
|
||||
var element = $(this);
|
||||
// Return early if this element already has a plugin instance
|
||||
if (element.data('nivoslider')) return;
|
||||
// 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,
|
||||
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,
|
||||
beforeChange: function(){},
|
||||
afterChange: function(){},
|
||||
slideshowEnd: function(){},
|
||||
lastSlide: function(){},
|
||||
afterLoad: function(){}
|
||||
};
|
||||
|
||||
$.fn._reverse = [].reverse;
|
||||
|
||||
})(jQuery);
|
||||
Reference in New Issue
Block a user