Question

I was using this guide to sort out some automatic image switching at intervals.

What I’d like to do is adapt it (or get some new ideas) for some images with links which I’ve currently got as (this is for structural purposes, the link# and image# variables are actual elements in my code):

<div id="myGallery">    
    <div class="active">
        <a href="link1"><img src="image1" /></a>
    </div>
    <div>
        <a href="link2"><img src="image2" /></a>
    </div>
    <div>
        <a href="link3"><img src="image3" /></a>
    </div>
</div>

I tried changing the bits in the tutorial that referenced img to div.

The only difference was that the first image took ages to load and none of them were ‘clickable’ as links.

Answer 1

Here, your script:

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

    $(document).ready(function(){
      // Run our swapImages() function every 5secs
      setInterval('swapImages()', 2000);
    })
  </script>

style :

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