Last updated on January 14th, 2022 at 10:03 am

VN:F [1.9.22_1171]
Rating: 7.1/10 (44 votes cast)

Replace images with time intervals using Jquery

This post will show you how to replace an image in specific time intervals.

For example: replacing image1.jpg with image2.jpg every 5 seconds.

Using setInterval() we are triggering a call to swapImages() function every 5000 milliseconds.

So, before we continue, we need to define where our images are coming from. Images URLs can be stored in javascript array or we could choose more elegant way and simply read them from HTML document.

We have this HTML code with div id “myGallery”

<div id="myGallery">
    <img src="image1.jpg" class="active" />
    <img src="image2.jpg" />
    <img src="image3.jpg" />
  </div>

We now need to hide all images and overlay all of them on one another. Here is a CSS to do that:

#myGallery{
      position:relative;
      width:400px; /* Set your image width */
      height:300px; /* Set your image height */
    }
    #myGallery img{
      display:none;
      position:absolute;
      top:0;
      left:0;
    }
    #myGallery img.active{
      display:block;
    }




Now, lets write jQuery function that will fade out currently active image and fade in the next image. Here is jQuery code:

function swapImages(){
      var $active = $('#myGallery .active');
      var $next = ($('#myGallery .active').next().length > 0) ? $('#myGallery .active').next() : $('#myGallery img:first');
      $active.fadeOut(function(){
      $active.removeClass('active');
      $next.fadeIn().addClass('active');
      });
    }

And now whats left is to add setInterval() with our function and the time interval we want our image to fade out and fade in.

// Run our swapImages() function every 5secs
setInterval('swapImages()', 5000);

Now we have gallery/slideshow with images changing every 5 seconds. You can easily customize this jQuery script to create your own slideshow.

Here is how your final code should look like: Update jquery.js with the local jquery file or the link you use or take it from code.jquery.com

<html>
<head>
  <script src="jquery.js"></script>
  <script>
    function swapImages(){
      var $active = $('#myGallery .active');
      var $next = ($('#myGallery .active').next().length > 0) ? $('#myGallery .active').next() : $('#myGallery img:first');
      $active.fadeOut(function(){
      $active.removeClass('active');
      $next.fadeIn().addClass('active');
      });
    }
 
    $(document).ready(function(){
      // Run our swapImages() function every 5secs
      setInterval('swapImages()', 5000);
    }
  </script>
  <style>
    #myGallery{
      position:relative;
      width:400px; /* Set your image width */
      height:300px; /* Set your image height */
    }
    #myGallery img{
      display:none;
      position:absolute;
      top:0;
      left:0;
    }
    #myGallery img.active{
      display:block;
    }
  </style>
</head>
<body>
  <div id="myGallery">
    <img src="image1.jpg" class="active" />
    <img src="image2.jpg" />
    <img src="image3.jpg" />
  </div>
</body>
</html>





VN:F [1.9.22_1171]
Rating: 7.1/10 (44 votes cast)
3 thoughts on “Replace images with time intervals using jquery”
  1. the code you had was throwing an error in firebug but the following code works 🙂

    function swapImages(){
    var $active = $(‘#myGallery .active’);
    var $next = ($(‘#myGallery .active’).next().length > 0) ? $(‘#myGallery .active’).next() : $(‘#myGallery img:first’);
    $active.fadeOut(function(){
    $active.removeClass(‘active’);
    $next.fadeIn().addClass(‘active’);
    });
    }

    $(document).ready(function(){
    setInterval(‘swapImages()’, 5000);
    });

    VA:F [1.9.22_1171]
    Rating: 5.0/5 (2 votes cast)
  2. Thanks Bret Bouchard, appreciate your effort :), keep visiting my website

    VN:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)

Leave a Reply

Your email address will not be published. Required fields are marked *