/**
* a slideshow system. will display a single slide (with a description, title and image) at a time,
* and will fade between the slides based on a duration. you can manually jump to specific slides.
* @class slideshow
* @example
$('#slideshow2').slideshows(
{
showcaption: false,//true
showpreview: false,//true
showpaging:false//true
}
);
*/
(function($) {
$.fn.slideshows = function(options){
/* the slide containing element.*/
var object=null;
/* the rotation timer.*/
var timer=null;
/* current index.*/
var index=0;
/* a collection of the slide dom objects.*/
var slides=[];
/* is rotation currently playing.*/
var playing=false;
/* the last slide index.*/
var lastslide=null;
/* initialize the slider by building the slides based on this.data and starting the rotation.
* @param object - css expression
* @constructor
*/
if (!this.length) {
return;
}
options = $.extend({
showcaption: true,
showpreview: true,
showpaging: true
}, options || {});
object = this;
slides = object.find('.slide');
if(options.showpaging==true){
object.append('');
object.children().eq(1).html("");
var de;
for(i=0;i'+ eval(i+1) +'');
}
object.find('.paging a').mouseleave(function() {
object.find('.preview').empty().hide();
});
object.find('.paging a').each(function(i) {
$(this).click(function() {
jump(i, $(this));
})
$(this).mouseover(function() {
preview(i);
})
});
}
if(options.showpreview==true){
object.append('');
}
if(options.showcaption==true){
object.append('');
}
// apply events
object.find('.mask').hover(
function() { pause(); },
function() { play(); }
);
if (slides.length <= 1){
object.find('.paging').hide();
}
// link(0);
play();
/**
* fade out the slides and fade in selected.
* @param index
*/
function fade(index) {
slides.stop(true, true).fadeout('normal');
slides.eq(index).fadein(1500);
// link(index);
if(options.showcaption==true){
var caption = object.find('.caption');
caption.stop(true, true).fadeout('fast', function() {
if ($(slides[index]).attr("caption")) {
caption.html("")
.append('')
.append($(slides[index]).attr("desc"))
.fadein(1500);
}
});
}
lastslide = index;
}
/**
* manually jump to a specific slide. pauses rotation.
* @param index
* @param control
*/
function jump(index, control) {
if ((lastslide == index) || (slides.length <= 1))
return;
// pause();
fade(index);
index = index;
object.find('.paging a').removeclass('current');
$(control).addclass('current');
}
/**
* play the rotation.
*/
function play() {
if (slides.length <= 1)
return;
if (!playing) {
playing = true;
timer = window.setinterval(rotate, 4000);
}
}
/**
* pause the automatic rotation.
*/
function pause() {
if (slides.length <= 1)
return;
window.clearinterval(timer);
playing = false;
}
/**
* display a tooltip preview.
* @param index
*/
function preview(index) {
var tooltip = object.find('.preview'),
top = (index * 15) + 15;
if ($(slides[index]).find('img').attr("src")) {
$('', {
src: $(slides[index]).find('img').attr("src"),
width: 100,
height: 47,
alt: ''
}).appendto(tooltip);
}
tooltip.append(''+ $(slides[index]).attr("caption") +'').css('top', top);
tooltip.show();
}
/**
* automatically cycle through all the slides.
*/
function rotate() {
var slideindex = index + 1;
if (slideindex > (slides.length - 1))
slideindex = 0;
if (lastslide == slideindex)
return;
fade(slideindex);
index = slideindex;
// set control to current
if(options.showpaging==true){
object
.find('.paging a').removeclass('current').end()
.find('.paging a:eq('+ slideindex +')').addclass('current');
}
}
/**
* toggle between play and pause.
*/
function toggle() {
if (playing)
pause();
else
play();
}
};
})(jquery);