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,
Related posts:
- jQuery: Set time interval between events with queue function
- jQuery: Animate and Transfer effect with Image
- jQuery: Preview Image with Zoom Effect
- jQuery: Grey out background and preview image as popup
- jQuery: Print array and object
- Simple and easy jQuery tabs with AJAX and PHP
- jQuery: How to replace string, div content and image src?
- jQuery: Preview Image with Tooltip Effect
- jQuery: Cool Bouncing Navigation with easing plugin
- Magento jQuery: How to use them together?
View Mukesh Chapagain's profile
