i'm looking for a lightweight script (pure javascript preferred) - it should be for smoothly fading a sequence of images into each other (=image-carousel). it should also be possible to run several instances (so it should be a prototype script), like for example: - site banner: fading 3 images after each other - main content: 3 galleries, each fading 3-5 images
any recommendations which script to use for that purpose?
thanks!
Hi I've written a simple script which makes use of the jQuery .fadeOut() and .fadeIn() methods along with a few lines of html and css. With the ids for the image elements numbered 1 to n the algorithm can easily iterate through the images and start again when it gets to the last image. It could be easily adapted to make the transitions occur automatically after a certain time delay instead of firing on a button click. Let me know if this helps. Here's the code:
<style type="text/css">
#images{ overflow:auto; }
.current{ display:inline; }
.hidden{ display:none; }
</style>
<script type="text/javascript" >
function doFade(current){
var speed = 500;
next = $("#"+(parseInt(current.attr("id")) + 1));
if(next.length <= 0) next = $("#1");
current.fadeOut(speed,
function fadeNextIn(){
current.attr("class", "hidden");
next.fadeIn(speed,
function afterFadeNextIn(){
next.attr("class","current");
}
);
}
);
}
$(document).ready(
function () {
$("#btnNext").click(
function(){
doFade($("#images .current"));
}
);
}
);
</script>
<div id="images">
<img id="1" title="image 1" alt="image 1" src="1.jpg" class="current" />
<img id="2" title="image 2" alt="image 2" src="2.jpg" class="hidden" />
<img id="3" title="image 3" alt="image 3" src="3.jpg" class="hidden"/>
<img id="4" title="image 4" alt="image 4" src="4.jpg" class="hidden"/>
</div>
<input id="btnNext" type="button" value="next" />
I've used the jQuery CrossSlide plugin and it works well.
