and other stuff
nextclick:false, // bind content click next slide
playclick:false, // bind content click play/stop
playhover:false, // bind content hover play/stop
playhoverr:false, // bind content hover stop/play (reverse of playhover)
playframe:true, // show frame "Play Now!"
fullscreen:false, // in full window size
imgresize:false, // resize image to slideshow window
imgcenter:true, // set image to center // TODO
imgajax:true, // load images from links
linkajax:false, // load html from links
help:'Plugin homepage: (a)Slideshow
'+
'Author homepage: Anton Shevchuk',
controls :{ // show/hide controls elements
'hide':true, // show controls bar on mouse hover
'first':true, // goto first frame
'prev':true, // goto previouse frame (if it first go to last)
'play':true, // play slideshow
'next':true, // goto next frame (if it last go to first)
'last':true, // goto last frame
'help':true, // show help message
'counter':true // show slide counter
}
};
/**
* Create a new instance of slideshow.
*
* @classDescription This class creates a new slideshow and manipulate it
*
* @return {Object} Returns a new slideshow object.
* @constructor
*/
$.fn.slideshow = function(settings) {
var _slideshow = this;
/*
* Construct
*/
this.each(function(){
var ext = $(this);
this.playFlag = false;
this.playId = null;
this.length = 0;
this.inited = new Array();
/**
* Build Html
* @method
*/
this.build = function () {
var _self = this;
ext.wrapInner('
'+data+'
');
});
} else { // nothing else
// slide.wrap('');
}
slide = ext.find('.slideshow-content > *:eq('+index+')');
// reset css
this._build(slide);
}
/**
* Play/stop on content click (like image and other)
*/
if (this.options.playclick)
$(slide).click(function(){
if (_self.playFlag) {
_self.stop();
} else {
_self.play();
}
return false;
});
};
/**
* Goto N-slide
* @method
* @param {Integer} n
*/
this.goSlide = function (n) {
if (this.options.index == n) return;
this.init(n);
var next = ext.find('.slideshow-content > *:eq('+n+')');
var prev = ext.find('.slideshow-content > *:eq('+this.options.index+')');
// restore next slide after all effects, set z-index = 0 for prev slide
prev.css({zIndex:0});
if (this.options.imgresize) {
next.css({zIndex:1, top: 0, left: 0, opacity: 1, width: this.options.width, height: this.options.height});
} else {
next.css({zIndex:1, top: (this.options.height/2 - next.attr('height')/2), left: (this.options.width/2 - next.attr('width')/2), opacity: 1});
}
this.options.index = n;
if (this.options.effect == 'random' ) {
var r = Math.random();
r = Math.floor(r*12);
} else {
r = -1;
}
// effect between slides
switch (true) {
case (this.options.effect == 'scrollUp' || r == 0):
prev.css({width:'100%'});
next.css({top:0, height:0});
prevAni = {height: 0, top:this.options.height};
break;
case (this.options.effect == 'scrollDown' || r == 1):
prev.css({width:'100%'});
next.css({top:this.options.height,height:0});
prevAni = {height: 0, top:0};
break;
case (this.options.effect == 'scrollRight' || r == 2):
prev.css({right:0,left:'',height:'100%'});
next.css({right:'',left:0,height:'100%',width:'0%'});
prevAni = {width: 0};
break;
case (this.options.effect == 'scrollLeft' || r == 3):
prev.css({right:'',left:0,height:'100%'});
next.css({right:0,left:'',height:'100%',width:'0%'});
prevAni = {width: 0};
break;
case (this.options.effect == 'growX' || r == 4):
next.css({zIndex:2,opacity: 1,left: this.options.width/2, width: '0%', height:'100%'});
prevAni = {opacity: 0.8};
break;
case (this.options.effect == 'growY' || r == 5):
next.css({opacity: 1,top: this.options.height/2, width:'100%', height: '0%'});
prevAni = {opacity: 0.8};
break;
case (this.options.effect == 'zoom' || r == 6):
next.css({width: 0, height: 0, top: this.options.height/2, left: this.options.width/2});
prevAni = {width: 0, height: 0, top: this.options.height/2, left: this.options.width/2};
break;
case (this.options.effect == 'zoomFade' || r == 7):
next.css({zIndex:1, opacity: 0,width: 0, height: 0, top: this.options.height/2, left: this.options.width/2});
prevAni = {opacity: 0, width: 0, height: 0, top: this.options.height/2, left: this.options.width/2};
break;
case (this.options.effect == 'zoomTL' || r == 8):
next.css({zIndex:1, opacity: 0,width: this.options.width/2, height: this.options.height/2, top:0, left: 0});
prevAni = {opacity: 0, width: 0, height: 0, top: this.options.height, left: this.options.width};
break;
case (this.options.effect == 'zoomBR' || r == 9):
next.css({zIndex:1, opacity: 0,width: this.options.width/2, height: this.options.height/2, top: this.options.height/2, left: this.options.width/2});
prevAni = {opacity: 0, width: 0, height: 0, top: 0, left: 0};
break;
case (this.options.effect == 'fade' || r == 10):
default:
prev.css({zIndex:0, opacity: 1});
next.css({zIndex:1, opacity: 0});
prevAni = {opacity: 0};
break;
}
var _self = this;
prev.animate(prevAni,this.options.effecttime);
// play next slide animation, hide prev slide, update label, update counter
next.show().animate({opacity: 1}, this.options.effecttime, function () { prev.hide(); _self.label(); _self.counter(); });
};
/**
* Update counter data
* @method
*/
this.counter = function () {
if (this.options.controls.counter)
ext.find('.slideshow-panel span.counter').html((this.options.index+1) + ' / ' + this.length);
};
// Now initialize the slideshow
this.options = $.extend({}, defaults, settings);
if (typeof(settings) != 'undefined') {
if (typeof(settings.controls) != 'undefined')
this.options.controls = $.extend({}, defaults.controls, settings.controls);
}
this.build();
/**
* Show slideshow
*/
ext.show();
/**
* Check play option
*/
if (this.options.play) {
this.play();
}
return ext;
});
/**
* external functions - append to $
*/
_slideshow.playSlide = function(){ _slideshow.each(function () { this.play(); }) };
_slideshow.stopSlide = function(){ _slideshow.each(function () { this.stop(); }) };
_slideshow.nextSlide = function(){ _slideshow.each(function () { this.next(); }) };
_slideshow.prevSlide = function(){ _slideshow.each(function () { this.prev(); }) };
return this;
}
})(jQuery);