/    Sign up×
Community /Pin to ProfileBookmark

Plugin Problems

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;
}
}
}
[/CODE]

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

to post a comment
JavaScript

0Be the first to comment 😎

×

Success!

Help @Yokiest spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.3,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...