/*
Plugin Name: Image Slider;
Developed By: Anirudh Prabhu;
Developed on: 16th September 2011;
Version: 0.3;
Description: This is a simple image slider
Usage: Give path of image as href attribute of anchor and description or info in alt attribute of anchor
*/
//Variable Declaration area
var number_of_images;
var actualindex = number_of_images - 1;
var targetelement;
var targetclass;
var startnow;
var insideloop = 0;
var currentcounter;
var choosenindex;
(function($){
$(".slidersindicator .counter").live('click',function()
{
choosenindex = $(".slidersindicator .counter").index(this);
$(".slidersindicator .counter").each(function(){
if($(this).hasClass("isactive"))
{
$(this).removeClass("isactive");
$(".slidersindicator .counter").eq(choosenindex).addClass("isactive");
}
})
window.clearTimeout(startnow);
//alert(choosenindex);
$(elementtoiterate).each(function(i,e){
if($(this).hasClass("active"))
{
$(this).fadeOut("slow",function(){$(elementtoiterate).eq(choosenindex).fadeIn("fast").addClass("active");
$(this).removeClass("active");
});
$(elementtoiterate).eq(choosenindex).addClass("active");
}
});
startnow = window.setTimeout(changeimagesimple,7000);
});
$(".arrow_next").live('click',function(e){gotonextimage()});
$(".arrow_prev").live('click',function(e){gotoprevimage()});
jQuery.fn.imageslider = function(options)
{
//this.wrap("<div class='sliderscontainer'></div>")
number_of_images = this.length;
targetclass = "."+this.attr("class");
//alert("fire1:"+targetclass);
return this.each(function(index,element){
targetelement = jQuery(element);
//Apply essential style required for images to overlap
if(index == 0)
{
targetelement.css({"position":"absolute"});
targetelement.attr({"imageindex":index});
targetelement.addClass("active");
}
else{
targetelement.css({"position":"absolute","display":"none"});
targetelement.attr({"imageindex":index});
}
//Absolute positioning is essential so that all the images can overlap.
if(index == number_of_images - 1)
{
//targetelement.after("</div>");
//changeimagesimple();
createindicator();
createarrow();
}
////////// End of the plugin /////////
});
}
})(jQuery)
function createarrow()
{
elementtoiterate = targetclass;
$(elementtoiterate).parent().append("<div class='arrow_prev'></div><div class='arrow_next'></div>");
}
function createindicator()
{
elementtoiterate = targetclass;
$(elementtoiterate).parent().after("<div class='slidersindicator '></div>");
for(i = 0;i <= parseInt(number_of_images - 1); i++)
{
if(i == 0)
{
$(".slidersindicator").append("<div class='counter isactive'></div>");
}
else
{
$(".slidersindicator").append("<div class='counter'></div>");
}
}
changeimagesimple();
}
function changeimagesimple()
{
$(elementtoiterate).each(function(i,e){
if($(this).hasClass("active"))
{
if(i < parseInt(number_of_images - 1))
{
currentcounter = i;
$(this).fadeOut("slow",function(){$(this).next().addClass("active").fadeIn("fast").end().removeClass("active")});
}
else
{
currentcounter = i;
$(this).fadeOut("slow",function(){
$(elementtoiterate).eq(0).fadeIn("fast").addClass("active").end().removeClass("active");
$(elementtoiterate+":first").addClass("active");
});
}
}
});
//Change the indicator
if(currentcounter < parseInt(number_of_images - 1))
{$(".slidersindicator").find(".counter").eq(currentcounter + 1).addClass("isactive").end().eq(currentcounter).removeClass("isactive");}
else
{$(".slidersindicator").find(".counter").eq(0).addClass("isactive").end().eq(currentcounter).removeClass("isactive");}
startnow = window.setTimeout(changeimagesimple,7000);
}
function gotonextimage()
{
elementtoiterate = targetclass;
window.clearTimeout(startnow);
$(elementtoiterate).each(function(i,e){
if($(this).hasClass("active"))
{
currentcounter = i
if(i < parseInt(number_of_images - 1))
{
$(this).fadeOut("slow",function(){$(this).next().addClass("active").fadeIn("fast").end().removeClass("active")});
$(".slidersindicator").find(".counter").eq(currentcounter + 1).addClass("isactive").end().eq(currentcounter).removeClass("isactive");
}
else
{
$(this).fadeOut("slow",function(){
$(elementtoiterate).eq(0).fadeIn("fast").addClass("active").end().removeClass("active");
$(elementtoiterate+":first").addClass("active");
});
$(".slidersindicator").find(".counter").eq(0).addClass("isactive").end().eq(currentcounter).removeClass("isactive");
}
}
})
startnow = window.setTimeout(changeimagesimple,7000);
}
function gotoprevimage()
{
elementtoiterate = targetclass;
window.clearTimeout(startnow);
$(elementtoiterate).each(function(i,e){
if($(this).hasClass("active"))
{
currentcounter = i
if(i > 0)
{
$(this).fadeOut("slow",function(){$(this).prev().addClass("active").fadeIn("fast").end().removeClass("active")});
$(".slidersindicator").find(".counter").eq(currentcounter - 1).addClass("isactive").end().eq(currentcounter).removeClass("isactive");
}
else
{
$(this).fadeOut("slow",function(){
$(elementtoiterate).last().fadeIn("fast").addClass("active").end().removeClass("active");
$(elementtoiterate+":last").addClass("active");
});
$(".slidersindicator").find(".counter").last().addClass("isactive").end().eq(currentcounter).removeClass("isactive");
}
}
});
startnow = window.setTimeout(changeimagesimple,7000);
}