I created a plugin that takes a list of images and does a fade effect using only one img tag now this is the first plugin that I’ve made and it works fine i just dont know how to add a next/prev and pause/play option to it and I cant seem to find any tutorials on it.
here is the plugin code
[CODE]
$.fn.imageSlider = function (options){
var obj = $(this);
var defaults =$.extend({
dir: null,
images: null,
effect : “fade”,
speed: 8000,
delay: 8000,
autoPlay :true,
clickOptions: null,
},options);
if(defaults.autoPlay){
return this.each(function(){ setInterval(function (){play(obj);},defaults.delay * 2)});
}else{
return this.each(function (){
play(obj);
});
}
function play(obj){
$this = obj;
var imageArrays = defaults.images.split(“:”);
var images1 = imageArrays[0].split(“,”).filter(function(e){return e});
var images2 = imageArrays[1].split(“,”).filter(function(e){return e});
var dir = defaults.dir.split(“,”);
var current = $this.children(“img”);
var temp = current.clone();
temp.addClass(“new”).css(“position”,”absolute”);
current.addClass(“old”);
temp.prependTo(obj);
$(“.old”).attr(“src”,function(){
var src = $(this).attr(“src”).split(“/”);
$i = src.length-1;
if($.inArray(src[$i],images1) != -1){
dir1 = dir[0];
if(images1[($.inArray(src[$i], images1) + 1) % images1.length]){
return dir1 +”/”+ images1[($.inArray(src[$i], images1) + 1) % images1.length];
}else{
return dir1 +”/”+ images1[0];
}
}else if($.inArray(src[$i],images2) != -1){
dir2 = dir[1];
if(images2[($.inArray(src[$i], images2) + 1) % images2.length]){
return dir2 +”/”+ images2[($.inArray(src[$i], images2) + 1) % images2.length];
}else{
return dir2 +”/”+ images2[0];
}
}
});
$remover = $(“.new”);
switch(defaults.effect){
case “fade”: $remover.fadeOut(defaults.speed,function (){
$remover.remove();
$(“.old”).removeClass(“old”);
});
break;
case “slideLeft”: $remover.animate({“left”:”-=”+$this.width()+”px”},defaults.speed,”linear”,function (){
$remover.remove();
$(“.old”).removeClass(“old”);
});
break;
}
}
}
Also if you see any mistakes/improvements please let me know and also an explanation would be nice so I can understand more about jquery plugin creation