/* usage example
$('#elementID').viewSlide(
'.element-childclass',
clickTransitionSpeed, // ms
autoSlide, // boolean
slideSpeed, // ms
autoTransitionSpeed, // ms
initialDelay // ms
);
*/
$.fn.viewSlide = function() {
var args = arguments[0] || {};
var slideContainer = $(this);
$(this).append('<div class="slideshow-arrow slideshow-arrow-left"></div>');
$(this).append('<div class="slideshow-arrow slideshow-arrow-right"></div>');
var element = arguments[0];
var speed = arguments[1];
var autoSlide = arguments[2];
var autoSlideInterval = arguments[3];
var autoSlideTransitionSpeed = arguments[4];
var initialDelay = arguments[5];
// elements in array
var slides = 0;
$(this).find(element).each(function() {
slides++;
$(this).attr("sn", slides);
$(this).addClass('slide-' + slides);
});
// hide all elements
$(this).find(element).hide();
// show first element
$(this).find(element).eq(0).show();
$(this).find(element).eq(0).addClass('active-slide');
// set defaults
var activeSlide = 1;
var nextSlide;
var mouseOverContainer = false;
/* next slide */
function slideNext(transitionSpeed) {
// jump to animation end
slideContainer.stop(true,true);
activeSlide = parseInt(slideContainer.find('.active-slide').attr('sn'));
nextSlide = activeSlide + 1;
if(activeSlide == slides) {
nextSlide = 1;
}
slideContainer.find(element).fadeOut(transitionSpeed);
slideContainer.find(element).removeClass('active-slide');
slideContainer.find('.slide-' + nextSlide).addClass('active-slide');
slideContainer.find('.slide-' + nextSlide).fadeIn(transitionSpeed);
}
function slidePrev(transitionSpeed) {
// jump to animation end
slideContainer.stop(true,true);
activeSlide = parseInt(slideContainer.find('.active-slide').attr('sn'));
nextSlide = activeSlide - 1;
if(activeSlide == 1) {
nextSlide = slides;
}
slideContainer.find(element).fadeOut(transitionSpeed);
slideContainer.find(element).removeClass('active-slide');
slideContainer.find('.slide-' + nextSlide).addClass('active-slide');
slideContainer.find('.slide-' + nextSlide).fadeIn(transitionSpeed);
}
$(this).find('.slideshow-arrow-right').click(function(){
slideNext(speed);
});
/* prev slide */
$(this).find('.slideshow-arrow-left').click(function(){
slidePrev(speed);
});
// automatic sliding
if(autoSlide) {
if(initialDelay) {
setTimeout(function(){
var slideTimer = setInterval(function() {
if(!mouseOverContainer) {
slideNext(autoSlideTransitionSpeed);
}
}, autoSlideInterval);
},initialDelay);
} else {
var slideTimer = setInterval(function() {
if(!mouseOverContainer) {
slideNext(autoSlideTransitionSpeed);
}
}, autoSlideInterval);
}
}
// autoSlide on off mouseenter/leave
slideContainer.mouseenter(function(){
mouseOverContainer = true;
});
slideContainer.mouseleave(function(){
mouseOverContainer = false;
});
}
