try this:
first you create an array wit all the images you want to use,
here it is called "
pics_arr",
you create a div to hold the images,
here it is
<div id="thumbs"></div>now you append the images to the div and add a click event
with animate, you change the opacity of the image in front
when this is finished, you move the image to the end of your image list, rechange the opacity and change the z-index, that's it.
the variable
workin is a flag, if you click on an image workin is set to true, now when you click very fast again nothing happens, and so it should be.
when the animation is finished workin is set to false and the next animation can start.
- <!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
var workin = false;
var pics_arr = ["img/pic_1.jpg", "img/pic_2.jpg", "img/pic_3.jpg", "img/pic_4.jpg"];
for(var i=0;i<pics_arr.length; i++){
$('<img />',{
src: pics_arr[i],
})
.css({
zIndex:pics_arr.length - i,
position: "absolute",
left: "0px",
top: "0px"
})
.click(function(){
if(workin)return false;
workin = true;
$(this)
.stop()
.animate({opacity: 0.0}, 600, function(){
$('#thumbs').append($(this));
$(this).parent().find("img")
.each(function(index){
$(this).css({
zIndex: pics_arr.length - index,
opacity: 1.0
});
});
workin = false;
})
})
.appendTo('#thumbs');
}
});
</script>
</head>
<body>
<div id="thumbs"></div>
</body>
</html>
