jQuery: A simple Slideshow
I have made a very simple jQuery slideshow. When you click the play button, then the images changes with fade in and fade out effect.
I have used animate() jQuery function for fade in and out. queue() and dequeue() functions along with setTimeout() function are used to set time interval between fade in and fade out. The images are stored in javascript array.
I have well commented the code so that it would be easy to understand. Here comes the full source code.
<html>
<head>
<title>jQuery: Slideshow</title>
<script src="jquery-1.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
/**
* Array of images
*/
var arr = [ "hills.jpg", "lilies.jpg", "sunset.jpg", "winter.jpg", "slideshow.jpg" ];
/**
* When play button is clicked
*/
$("#play").click(function(){
/**
* Foreach loop
*/
$.each(arr, function(i, val) {
/**
* Changing div opacity to 0. 1000 is the time in ms.
*/
$("#sImage").animate({opacity: 0.0}, 1000);
/**
* Queue function will place the event in queue
* Changing image src after the above animate function is completed
*/
$("#sImage").queue(function(){
$("#sImage").attr("src", val);
$("#sImage").dequeue();
});
/**
* Changing div opacity to 1. 1000 is the time in ms.
*/
$("#sImage").attr("src", val).animate({opacity: 1.0}, 1000);
/**
* Queue function will place the event in queue
* Here, queue function is used to hold the changing image for 1 second display
*/
$("#sImage").queue(function(){
setTimeout(function(){
$("#sImage").dequeue();
}, 1000);
});
});
});
});
</script>
</head>
<body>
<div align="center">
<button id="play"> Play </button>
<div class="slideshow">
<img id="sImage" src="slideshow.jpg" alt="slideshow" rel="slideshow" />
</div>
</div>
</body>
</html>
Cheers,
From Mukesh Chapagain's Blog | Post jQuery: A simple Slideshow
[...] Read more from the original source: jQuery: A simple Slideshow | Mukesh Chapagain's Blog [...]
Leave your response!