/**
* jQuery (a)Slideshow plugin
*
* Copyright (c) 2008 Trent Foley
* Licensed under the MIT License:
* http://www.opensource.org/licenses/mit-license.php
*
* @author Anton Shevchuk AntonShevchuk@gmail.com
* @version 0.1
*/
;(function($) {
defaults = {
width:320, // width in px
height:240, // height in px
index:0, // start from frame number N
content :{
'nextclick':false, // bind content click next slide
'playclick':false, // bind content click play/stop
'playframe':true, // show frame "Play Now!"
'imgresize':false, // resize image to slideshow window
'imgcenter':true // set image to center // TODO
},
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':false, // 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
},
slideshow :{
'time':3000, // time out beetwen
'title':true, // show title
'panel':true, // show controls panel
'help':'Plugin homepage: (a)Slideshow
'+
'Author homepage: Anton Shevchuk'
}
};
css = true;
/**
* 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 _self = this;
/*
* Construct
*/
this.each(function(){
ext = $(this);
// Extend Object
$.extend(ext, {
buildFlag:false,
playFlag :false,
playId :null,
slideshowLength:0,
/**
* Build Html
* @method
*/
build:function () {
if (this.buildFlag) return false;
this.addClass('slideshow');
this.wrapInner('');
this.slideshowLength = this.find('.slideshow-content > *').length;
if (this.options.slideshow.title) {
this.prepend('');
this.find('.slideshow-label').css('width', this.options.width - 26 + 'px');
}
if (this.options.slideshow.panel) {
this.append('');
if (this.options.controls.first)
this.find('.slideshow-panel').append('First');
if (this.options.controls.prev)
this.find('.slideshow-panel').append('Prev');
if (this.options.controls.play)
this.find('.slideshow-panel').append('Play');
if (this.options.controls.next)
this.find('.slideshow-panel').append('Next');
if (this.options.controls.last)
this.find('.slideshow-panel').append('Last');
if (this.options.controls.help) {
this.find('.slideshow-panel').append('Help');
this.find('.slideshow-panel').prepend(''+this.options.slideshow.help+'
');
this.find('.slideshow-help').css('width', this.options.width - 4 + 'px');
}
if (this.options.controls.counter) {
this.find('.slideshow-panel').append(''+(this.options.index+1)+' / '+this.slideshowLength+'');
}
if (this.options.controls.hide) {
this.find('.slideshow-panel-place').hover(function(){
$(this).find('.slideshow-panel').fadeIn();
}, function() {
$(this).find('.slideshow-panel').fadeOut();
});
this.find('.slideshow-panel').hide();
}
this.find('.slideshow-panel-place').css('width', this.options.width + 'px');
}
/**
* Set Size Options
*/
this.css('width', this.options.width + 'px');
// this.css('height', this.options.height + 'px');
this.find('.slideshow-content').css('width', this.options.width + 'px');
this.find('.slideshow-content').css('height', this.options.height+ 'px');
/**
* Change children styles
*/
if (this.options.content.imgresize) {
this.find('.slideshow-content > img').css('display', 'block');
this.find('.slideshow-content > img').css('width', '100%');
this.find('.slideshow-content > img').css('height', '100%');
// this.find('.slideshow-content > img').css('width', this.options.width + 'px');
// this.find('.slideshow-content > img').css('height', this.options.height+ 'px');
}
if (this.options.content.imgcenter) {
// TODO: image to vertical and horisontal center
/*
this.find('.slideshow-content > img').css('position', 'relative');
this.find('.slideshow-content > img').css('left', '50%');
this.find('.slideshow-content > img').css('top', ' 50%');
this.find('.slideshow-content > img').wrap('');
*/
}
this.find('.slideshow-content > *').css('margin', '0');
this.find('.slideshow-content > *').css('position', 'absolute');
this.find('.slideshow-content > *').css('display', 'block');
this.find('.slideshow-content > *:not(img)').css('width', '100%');
this.find('.slideshow-content > *:not(img)').css('height', '100%');
// this.find('.slideshow-content > *').css('width', this.options.width + 'px');
// this.find('.slideshow-content > *').css('height', this.options.height+ 'px');
this.find('.slideshow-content > *').find('label:first').hide();
this.find('.slideshow-content > *:not(:eq('+this.options.index+'))').hide();
this.showLabel();
if (this.options.content.playframe) {
//this.find('.slideshow-content').append('');
//this.find('.slideshow-content').append('');
}
this.bindEvents();
return true;
},
/**
* Find and show label of slide
* @method
*/
showLabel:function () {
if (!this.options.slideshow.title) return false;
label = '';
current = this.find('.slideshow-content > *:visible');
if (current.attr('alt')) {
label = current.attr('alt');
} else if (current.find('label:first').length>0) {
label = current.find('label:first').html();
}
this.find('.slideshow-label').html(label);
},
/**
* Goto previous slide
* @method
*/
prevSlide:function () {
if (this.options.index == 0) {
i = (slideshowLength-1);
} else {
i = this.options.index - 1;
}
this.goSlide(i);
},
/**
* Play Slideshow
* @method
*/
play:function () {
this.playFlag = true;
this._play();
this.find('a.play').addClass('stop');
},
/**
* Play Slideshow
* @method
*/
_play:function () {
var _self = this;
this.nextSlide();
if (this.playFlag)
this.playId = setTimeout(function(ms){ _self._play() }, this.options.slideshow.time)
},
/**
* Stop Slideshow
* @method
*/
stop:function () {
this.find('a.play').removeClass('stop');
this.playFlag = false;
clearTimeout(this.playId);
},
/**
* Goto next slide
* @method
*/
nextSlide:function () {
if (this.options.index == (this.slideshowLength-1)) {
i = 0;
} else {
i = this.options.index + 1;
}
this.goSlide(i);
},
/**
* Goto N-slide
* @method
* @param {Integer} n
*/
goSlide:function (n) {
var _self = this;
this.find('.slideshow-content > *:eq('+this.options.index+')').fadeOut('normal');
this.options.index = n;
this.find('.slideshow-content > *:eq('+this.options.index+')').fadeIn('normal', function () {
_self.showLabel();
_self.updateCounter();
});
},
/**
* Update counter data
* @method
*/
updateCounter:function () {
if (this.options.controls.counter)
this.find('.slideshow-panel span.counter').html((this.options.index+1) + ' / ' + this.slideshowLength);
},
/**
* Bind Events
*/
bindEvents:function() {
var _self = this;
/**
* Go to next slide on content click (optional)
*/
if (_self.options.content.nextclick)
this.find('.slideshow-content').click(function(){
_self.stop();
_self.nextSlide();
return false;
});
/**
* Goto first slide button
*/
this.find('a.first').click(function(){
_self.stop();
_self.goSlide(0);
return false;
});
/**
* Goto previouse slide button
*/
this.find('a.prev').click(function(){
_self.stop();
_self.prevSlide();
return false;
});
/**
* Play slideshow button
*/
this.find('a.play').click(function(){
if (_self.playFlag) {
_self.stop();
} else {
_self.play();
}
return false;
});
/**
* Goto next slide button
*/
this.find('a.next').click(function(){
_self.stop();
_self.nextSlide();
return false;
});
/**
* Goto last slide button
*/
this.find('a.last').click(function(){
_self.stop();
_self.goSlide(_self.slideshowLength-1);
return false;
});
/**
* Show help message
*/
this.find('a.help').click(function(){
_self.stop();
_self.find('.slideshow-help').slideToggle();
return false;
});
setTimeout(function(ms){ _self.play() }, _self.options.slideshow.time);
//this.find('.slideshow-frame').click(function(){
// $(this).remove();
// _self.find('.slideshow-shadow').remove();
// return false;
//});
}
});
// Now initialize the slideshow
ext.options = $.extend({}, defaults, settings);
// TODO: theme selector support
// ext.cssFile = '';
ext.build();
ext.show();
return this;
});
}
})(jQuery);