A Better Image Rotator

by Dan Benjamin

151 Reader Comments

Back to the Article
  1. This was a great script but how do you set it up on a timer?

    Copy & paste the code below to embed this comment.
  2. I had this same problem when I switched local server. Everything had previously worked fine.

    I found that if you created both an ID & Class in the stylesheet and left the ID blank (but the Class specified) it corrected the error.

    Copy & paste the code below to embed this comment.
  3. Javascript, with a timing loop and a lot of images addressed by their array numbers, is fine for slower rotating where the images will certainly have time to load, or where you’ve done preloading. But experiments have shown me that if you don’t want people waiting for preloads, or if the image size is quite large, or, especially, if the rotation speed is fast (under a half second), there’s a better way. Having tried a rotator doing 600×400 images at 1/3 second, with and without preloads, I found that the browsers went nuts. I use smaller images and 1 second times and standard Javascript image cycling with no problem, but the browsers draw the line at the bigger/faster combo. So guess what works perfect on all browsers? I made an 800K gif with lots of images in it and 1/3 second timing, using ImageForge and MS Gif Animator. I expected browsers to choke on this since no preloading occurred. But they all smiled, winked, and purred! I hope this helps anyone who’s tried to make rotators work with big, fast images and tore his hair out at the results.

    Copy & paste the code below to embed this comment.
  4. i found how to ad the target option:
    in the rotator.php, write like that:

      # if an url was specified, output the opening A HREF tag
      if ( $images[$img][‘url’] ) {
        printf(
          ‘<a href=”%s” title=”%s” target=”%s”>’,
          $images[$img][‘url’],
          $images[$img][‘title’],
          $images[$img][‘target’]
        );
      }


    in the .ini file ad a line:
    target =_blank

    greats!!

    Copy & paste the code below to embed this comment.
  5. If you are trying to get rid of the border it is probably not an image border but a ‘link border’. This worked on my page:-
    A:hover{color: red; text-decoration:none}
    a img {border:0;]
    The first line just sets the hover attributes the second the link border.
    Secondly you can set the script up to reference different ini files on the same page allowing different pools of images on different places on the same page by renaming the function ‘showImage’to showImage1, showImage2,showImage3 etc and saving each changed file as a separate rotator.php file. ie rotator1.php, rotator2.php etc. The image is called by <?php showImage(‘images2.ini’); ?> or
    <?php showImage(‘images3.ini’); ?>
    This might be inelegant but it works . . .

    Copy & paste the code below to embed this comment.
  6. Excellent information here cause in my language, there are not much good source like this. This interesting post made me smile. Maybe if you throw in a couple of pictures it will make the whole thing more interesting.

    Copy & paste the code below to embed this comment.
  7. Can you add a tooltip to each image?

    Copy & paste the code below to embed this comment.
  8. I just wanted to say thanks!  I extended your script to provide a random image for the side and then I grabbed all the images and randomly selected their order to make a group of thumbnails.  Perfect for a new webcomic facebook app I made. 

    Thanks again!

    Copy & paste the code below to embed this comment.
  9. I like this site! It’s full of educational information which are related to my works. I am glad to find it. Wink! GAR Labs

    Copy & paste the code below to embed this comment.
  10. I like this site! It’s full of educational information which are related to my works. I am glad to find it. Wink! GAR Labs

    Copy & paste the code below to embed this comment.
  11. Thank you for great article and code.  Just found this when getting frustrated with trying to use a JS to rotate images.  Now my client – my wife! – wants the images to rotate every x seconds as opposed to reload.  I know I can do it in JS, but can this be done in php, is there an easy fix/addition to this code to do it?  Any suggestions appreciated.

    Copy & paste the code below to embed this comment.