Home » jQuery

jQuery: A simple Slideshow

1 February 2010 4,185 views Popularity: 9% Share/Bookmark

email

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.

View Demo || Download Code

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>

View Demo || Download Code

Cheers,

Related posts:

  1. jQuery: Set time interval between events with queue function
  2. jQuery: Animate and Transfer effect with Image
  3. jQuery: Preview Image with Zoom Effect
  4. jQuery: Grey out background and preview image as popup
  5. jQuery: Print array and object
  6. Simple and easy jQuery tabs with AJAX and PHP
  7. jQuery: How to replace string, div content and image src?
  8. jQuery: Preview Image with Tooltip Effect
  9. jQuery: Cool Bouncing Navigation with easing plugin
  10. Magento jQuery: How to use them together?
  • http://libs.khmer855.com/2010/02/01/jquery-a-simple-slideshow-mukesh-chapagains-blog/ jQuery: A simple Slideshow | Mukesh Chapagain's Blog » KHMER855.COM

    [...] Read more from the original source: jQuery: A simple Slideshow | Mukesh Chapagain's Blog [...]

  • http://meh626.com Steve

    Nice work! Is it possible for example to play the slideshow twice on document load and if the user clicks the button afterwards play through once?

  • Nomeasdev

    Thanks martin.. was in search of it…
    Can you suggest me how to download huge number of images from the net can see here:
    http://ftp.gnome.org/pub/GNOME/teams/art.gnome.org/backgrounds/

    need 2 download images from here…