This jQuery plugin, will extend img capabilities, by creating a slide gallery effect based on a comma separated src of images. Just simple call it and you are ready to go.

mini_pic_slide.js

//Miguel Queiroz - 2013
// A call to the jQuery lib is required.
//Converts a img element into a gallery, transitioning between pictures when loaded. Based on a string src. 
/// Like:  $("#img_div").pic_slide("img1.jpg, img2.png, img3..."); 
(function($){
$.fn.pic_slide=function(src,path){
return this.each(function(){

var span_go="";
if(src.split(",").length<2){ $(this).attr("src","");  $(this).attr("src",src).load(function(e){$(this).fadeTo(1200,1);}); return;} //case single item
for(var a=0; a<src.split(",").length; a++){span_go+='<span id="'+this.id+"_"+a+ '" onclick="$(\'#'+this.id+'\').pic_slide_goto('+a+',\'  '+this.id+' \')" class=slide_changer> </span>';}
$(this).parent().append("<div>"+span_go+"</div>");
if($(this).attr("pic_src_index_stop")){return;}
$(this).attr("pic_src_index","0");
$(this).attr("pic_path",path);
$(this).parent().find(".slide_changer_sel").attr("class","slide_changer");
$("#"+this.id+"_"+$(this).attr("pic_src_index")).attr("class","slide_changer_sel");
$(this).attr("pic_src",src).stop().fadeTo(20,0);
    
$(this).load(function(e){

    if($(this).attr("pic_src_index_stop")){return;} //force stop
    
    //we use jquery delay as timers to auto-load the next image. 
    //Pictures are always faded in, when the next image is loaded, which gives a smooth transition.
    $(this).stop().fadeTo(0,0).fadeTo(1200,1).delay(5000).fadeTo(0,1,function(e){
    if($(this).attr("pic_src_index_stop")){return;}
    $(this).attr("pic_src_index",(Number($(this).attr("pic_src_index"))+1));
    

    if($(this).attr("pic_src_index")>=$(this).attr("pic_src").split(",").length){$(this).attr("pic_src_index",0).fadeTo(0,0);}
$(this).parent().find(".slide_changer_sel").attr("class","slide_changer");
$("#"+this.id+"_"+$(this).attr("pic_src_index")).attr("class","slide_changer_sel");
$(this).attr("src",path+$(this).attr("pic_src").split(",")[$(this).attr("pic_src_index")]);
}); 
});

//store the current src in the element attribute pic_src
$(this).attr("src",path+$(this).attr("pic_src").split(",",1));

});
};

//this one will allow to jump to a index, stoping the slide animation.
$.fn.pic_slide_goto=function(ind,referer){
return this.each(function(){

if(referer){
$("#"+referer.trim()).parent().find(".slide_changer_sel").attr("class","slide_changer");
$("#"+referer.trim()+"_"+ind).attr("class","slide_changer_sel");
}
 
if($(this).attr("pic_src_index")==ind || $(this).attr("pic_src_index_stop",ind)==ind){return;}
$(this).attr("pic_src_index_stop",ind);
$(this).attr("pic_src_index",ind);
if(!$(this).attr("pic_src_index")){console.log("Picture slide plug-in, is not correctly working for the selected element");return;}
$(this).stop().fadeTo(0,0).attr("src",$(this).attr("pic_path")+$(this).attr("pic_src").split(",")[$(this).attr("pic_src_index")]).unbind("load").load(function() {
$(this).show().stop().fadeTo(500,1);
});
}); 
};
})(jQuery);