Comments on A Better Image Rotator

by Dan Benjamin

151 Reader Comments

Back to the Article
  1. Why go to all the trouble when you can use nicely formatted xml.

    Copy & paste the code below to embed this comment.
  2. great explanation!  I really like this, but I’ve got a question.

    I’d like it to rotate & display more than one image - how would I do that? 
    basically, if I’ve got 3 images listed in the .ini file, I’d like each one listed in some random order.
    is that possible with some minimal tweaks?

    thanks!!!

    Copy & paste the code below to embed this comment.
  3. Nick: If I understand what you’re asking - the order the images are listed in the INI file doesn’t matter, the image being displayed is always selected from the list at random.

    Copy & paste the code below to embed this comment.
  4. Pointman:

    What is your point…man?

    Use XML for what? Are you suggesting he use xml for the config file? How would that be easier? The *.ini file seems nicely formatted to me and easy to use.

    Copy & paste the code below to embed this comment.
  5. As with the other interesting and handy articles published here, I’d like to see a version of this for ASP.NET. I see an XML file, dynamic XML and an XSLT. The demand for ASP.NET equivelents became obvious to me after I created this .NET version of a previous ALA article: http://www.enjoybeingsoftware.com/dev/gen_heading/

    What I don’t see is a great need for random image rotation where the image would be of variable sizing, how could one work that in to a CSS layout without breaking the design?

    Is there a practical example of this technique in usage? The example posted is hardly “real-world”.

    Copy & paste the code below to embed this comment.
  6. You might be right about the fact that XML is ‘the way to go’ but it isn’t an esay thing to pick up…
    INI-files are so much easier and as I remeber ASP.NET can just as easy handle INI files with some built-in functions. (-> justin)

    Anyway, rotators isn’t really a dificult topic anyway, you just make it incomplicated

    Mathijsken

    Copy & paste the code below to embed this comment.
  7. Here’s a dumb question:

    Did I read the article correctly to understand that all my pages which use this will now be “###.php” and not “###.html”?

    I’m already managing a fairly big site and I don’t want to go back through and change all my links. Is there a way to keep my .html extensions?

    Copy & paste the code below to embed this comment.
  8. There is an AdRotator control that comes with .Net. If you need something special from it just inherit and extend it.

    Copy & paste the code below to embed this comment.
  9. guyPaulo, you might want to look into using the older technique for rotating images, which can be found here: http://www.alistapart.com/articles/randomizer/

    That way your pages can continue being .html or whatever. You could also get even more abstract by using the background-image property of CSS to call the random image generator…

    .random_image
    {
    background-image:url(../s/random_image.php);
    ...
    }

    You can also go into the server configuration settings and map the PHP engine to parse HTML files, but that would add a lot of processing overhead and require administrative access to your server.

    As a side note, you have an entire site that is static? All HTML pages with no backend processing? You must like editing HTML pages and FTPing them a lot! :)

    Copy & paste the code below to embed this comment.
  10. guyPaulo: not a dumb question at all.  Depending on your web host, there are a couple of ways to handle this.  The easiest way would be to tell the server to treat (and parse) *all* html files as if they were PHP files.  The performance hit to the server is small, but it’s something to take note of if you have many plain html pages which would be parsed unnecessarily.

    You can place the following code in a .htaccess file at the root of your web folder to enable this:

        AddType application/x-httpd-php .htm .html

    This should handle the switch for you - but again, remember there’s a slight performance hit for html pages that don’t contain PHP as they’ll now be parsed as if they were PHP files.

    Copy & paste the code below to embed this comment.
  11. I did mine in Flash. :)

    And Stanley Kubrick looks like kind of a psycho ...

    Copy & paste the code below to embed this comment.
  12. Narrator:
    what I meant is, if I’ve got 4 images listed in my ini file, I’d like to have all 4 displayed on my page at the same time - but have the script randomize the order each time the page loads.

    does that make more sense?

    Copy & paste the code below to embed this comment.
  13. Only kinda? He looks major psycho! I guess that’s what happens when you’re the greatest director of our time.

    Copy & paste the code below to embed this comment.
  14. I agree that changing the .ini file to an xml file would be ideal, especially if it uses some more semantic markup so as not to scare-off anyone who inherits the updating job. Also, a slick programmer could manage the rotation in a database with an added ‘image_group’ field, removing the need for multiple config files and allowing the creating of a front-end application that could manage the files. Altogether I like like the improvements.

    Copy & paste the code below to embed this comment.
  15. Excellent.
    A great script and huge improvement.
    Thanks.

    Copy & paste the code below to embed this comment.
  16. Very good article, thank you for sharing.  I have an image rotator on my site that uses almost exactly the same idea you have here with just a few differences.

    For one, I don’t use an .ini file.  The ini file parser doesn’t like two double-quotation marks in the middle of a value (e.g. James “007” bond) or ampersands (php 4.3.8).  This prevents you from linking to CGI generated web pages, for instance.

    Instead I use this for my configuration file:

    $src = array();
    $href = array();
    $alt = array();

    $src[] = ‘/img/image-one’;
    $href[] = ‘url-one’;
    $alt[] = ‘alt-for-image-one’;

    $src[] = ‘/img/image-two’;
    $href[] = ‘url-two?cgi=value&another=cgi-value’;
    $alt[] = ‘alt-for-image-two’;

    Second, I wrap all usage of those values in the script in an htmlentities() call.  That escapes characters that might break the anchor or img tags generated by the script.

    Like this:

    echo ‘alt=”’.htmlentities($alt[$index]).’”’;

    Copy & paste the code below to embed this comment.
  17. Why only images? Why .ini-files?

    We could as well just include a random (x)html-fragment from a directory (similar to the first roationscript), and with a single script we get image-rotation, or flash-rotation or article-rotation or .....

    The advantage of a configuration file (may it be .ini, xml or database driven) is, that we get some sort of simple documentation in one file for free. But it wouldn’t be complicated to put the html-fragments into one config-file.

     

    Copy & paste the code below to embed this comment.
  18. nice work, thumbs up!

    Copy & paste the code below to embed this comment.
  19. I did a little tweak on the php file as well as the include part… I added $_SERVER[“DOCUMENT_ROOT”].”/path/to/rotate.php”  same thing with the ini src one the rotate.php itself… but all in all, it really works great and loads fast.

    Copy & paste the code below to embed this comment.
  20. Just an FYI to any of your readers who try this and are having troubles with it: http://bugs.php.net/bug.php?id=28029 is what I learned of when I tried a hack on my blog app that used getimagesize() to (duh) get the image’s size.  According to the posts in the blog app’s forum there are different types of buggyness available.  I got a long delay before no values were returned, others had a fixed set of values returned, and some had problems with only certain image types or images of rather large byte or pixel sizes.

    Copy & paste the code below to embed this comment.
  21. On the examples in Mozilla and Firefox I see the nasty default border showing in the examples. Did someone just forget or do you not have control over that?

    Copy & paste the code below to embed this comment.
  22. Just in the nick of time. !!
    I was breaking by head in writing an Image Rotator for my website - http://www.rolex-replica.net
    Wanted to rotate all rolex watch images and stuff…....

    Gr8 work, thanks :-)

    Copy & paste the code below to embed this comment.
  23. I wonder why you promote this solution with a plain .ini file since PHP ships with a pretty powerful XML toolkit. Why having such a handwritten parser? I support ‘XML is the way to go’.

    Even more I would recommend to implement this script with a database driven system if you want to rotate a larger number of images: As you say most of webhosters support PHP these days they also offer some kind of database like MySQL, PostgreSQL, MSSQL…

    Copy & paste the code below to embed this comment.
  24. I did actually post an update to your original article a year ago, allowing random html rather than random images.  This solved the problems of not having alt tags - you could essentially put in any random markup you wanted.  I can’t really see why you’d want or need anything more complicated?

    Rgds,
    Jake.

     

    Copy & paste the code below to embed this comment.
  25. True Brant but not only would you have to know about OO but you’d also have to run .NET which would be a shame

    Copy & paste the code below to embed this comment.
  26. That was a reponse to first page post, oops (In forget ALA can get that many posts in 24hrs)

    Copy & paste the code below to embed this comment.
  27. It strikes me that with a bit of manipulation of DHTML and PHP the design opportunities for this are endless. There is no reason why XML or MySQL (or any other database for that matter)couldn’t be used as alternatives to the .ini file method. If the site uses a database, use that. The chances are that in a dynamic server side scripted site that uses database connections, these will be open on most if not all pages. If so, the extra load on the server will be negligible when compared to the advantages of building rotator inputs to a content management system so that additional images/content/pullquotes etc, can be added by non-technical users.

    Personally, I will be wrapping up the functionality here in a couple of generic classes that can be added to my PHP development library and called upon when needed. When I have, I’ll drop a post here if Mr Z has no objection.

    Copy & paste the code below to embed this comment.
  28. Hi there,

    In the older version I was ablr to call the script via CSS. Can this be done with this version?

    Thanks

    Copy & paste the code below to embed this comment.
  29. Well… just take a look at this:

    http://www.kolumnen.de/

    Copy & paste the code below to embed this comment.
  30. Hmm..

    When I refresh the pages with the images, only the same images keep showing up again and again and again..

    http://www.bergen-malingfabrikk.no/rotatortest.php

    Copy & paste the code below to embed this comment.
  31. ..even the same images show up in all the browsers I tested?!

    Copy & paste the code below to embed this comment.
  32. ... save bandwidth and user a javascript rotator.

    Attaching images server-side to pages means that the whole document has to be resent when only the slightest bit of html is changed!
    Use embedded javascript instead, where the html doesnt change at all.
    I’d only go for this option on a page that weighs alot, otherwise the php solution is good to go :)

    Copy & paste the code below to embed this comment.
  33. Great idea, but I’d have to say XML would be the way to go for this kind of thing.

    Copy & paste the code below to embed this comment.
  34. I take it this method also allows the client to cache the images?

    I think the previous version returns the file using a Mime type as opposed to passing through an actual URL to the source image. This is in itself a great bonus for us dailup users out there ;)

    Great work though

    Copy & paste the code below to embed this comment.
  35. If you have a large number of images it would be so much easier to store it all in the database together with the rest of the website content.

    Copy & paste the code below to embed this comment.
  36. thanx for the article, it’s good and handy ;)
    i have a problem with the image rotator. It seems to work well, when i open the page where i wanted the image rotator to be, it is there. Though the image itself is not shown only a red cross and the name of the picture. If you click on the cross you activate the link and you get to see the picture.
    What could cauze this problem i am having?

    Copy & paste the code below to embed this comment.
  37. Chris (above) wrote:
    Attaching images server-side to pages means that the whole document has to be resent when only the slightest bit of html is changed!

    Not so. The code gets changed on the server before the web page is sent to the client (browser). The document is sent only one time. This is how all server-side scripting works.

    No bandwidth is saved by using JavaScript instead. JavaScript code must be sent from the server to the client, and therefore most likely adds bytes that are sent over the wire (increase the file size of the web page).

    Copy & paste the code below to embed this comment.
  38. How could the code be changed to alter images by day and not every refresh?

    Copy & paste the code below to embed this comment.
  39. “Next week: your own guestbook!”

    Come on guys these tutorials are of the “beginner” rating. Any programmer with more than a month of experience can figure out how to produce basic materials such as described in this item.

    Can we please get back to the interesting articles about fancy solutions to daily problems?

    Copy & paste the code below to embed this comment.
  40. Larry,

    So you’re saying that even when the html is changed, the page is not sent again?

    You’ll notice a delay in the page rendering if you opt for this method.

    Copy & paste the code below to embed this comment.
  41. <pre> 
    <?php
    srand((double)microtime()*1000000);
    $num = rand(1,8);// second number is number of total files to randomize
    include (‘path/to/file/’.$num.’.php’);
    ?>

    Copy & paste the code below to embed this comment.
  42. Yes, that’s also what i need!
    How to do it?

    Copy & paste the code below to embed this comment.
  43. Cool.
    To make this a total geeky thing, you could probably write a config panel (as easy as the config file was).
    But then there goes the simplity :)
    Very cool script.
    Dustin

    Copy & paste the code below to embed this comment.
  44. I’ll just point that if you have a good cruft-free content manager—Movabletype, for instance—you can have it spurt out the .ini file with either custom fields or just set-up another blog. This would be helpful only if you need to manage a whole lot of random images (rotating nameplates for instance, ala’ typographi.com)

    Copy & paste the code below to embed this comment.
  45. Is there any way to store and display caption data with each picture?

    Copy & paste the code below to embed this comment.
  46. first off, i love all of you. in each of your lives - keep up the amazing work.

    ok.

    trying a lot of things.
    but im only getting the second image in the ini to load.
    even when switching up the order in the list.
    its always number two that wins.
    all images will load, if i put them second in the ini.

    *beats dead horse*

    im starting to think that no.2 = kaka

    xox
    efa

    Copy & paste the code below to embed this comment.
  47. The major advantage to using XML over an .ini file is XML allows you to have multiple elements with the same name. And now that PHP supports SimpleXML its easier than ever.

    I’ve written an article on my blog discussing how to do just that. Mind you it is specialized to my needs and it is my first attempt at writing such an article, so go easy on me.

    http://pr10n.lowriderdog.com/blog/rotateimage

    Sorry about the plug, delete if desired. Although I think the bandwidth hit I’ll get will be punishment in itself.

    Copy & paste the code below to embed this comment.
  48. Great little script. Really appreciate the support for CSS!

    Copy & paste the code below to embed this comment.
  49. A simple question I cpuld not get to the example “right here” the url didn’t work

    Copy & paste the code below to embed this comment.
  50. I think this is a pretty nifty tool. The requirment that all of your pages that use the tool must end in php can be a bit annoying, but I imagine you would be mostly using this tool in a dymanic site where you are already using a fair bit of php code. Besides, it seems like it is pretty easy to fix anyway.

    As for the configuration file, while XML might be pretty and new, I like the ini method which is easy to understand and add to. This technique is about making an interesting design method useful and powerful, not code zealotry.

    Copy & paste the code below to embed this comment.
  51. the script seems to be having problems being random, it calls the second image every time.

    This seems to be the same problem as efa was having.

    Any suggestions?

    Copy & paste the code below to embed this comment.
  52. Has anyone ever experienced a delay with this rotator method? The old version in particular, I would see the entire page download, then the image finally come in. I was using it to write a background image. Would that be related to the size of the image, where it was in the CSS file, how I included the CSS file (@import vs. link)?

    Just wondering.

    Copy & paste the code below to embed this comment.
  53. “Come on guys these tutorials are of the “beginner” rating”

    Yes granted, but not all ALA readers are advanced coders.

    There is more than enough space on ALA to suit everybody’s tastes. I do get tired of readers knocking the articles just because they didn’t find it useful or it was “obvious” to them.

    This is not YOUR webzine. If you don’t like an article then don’t read it, or at the very least keep such comments to yourself.

    Copy & paste the code below to embed this comment.
  54. For a non php-shark this is great! It works like a charm and took only a few minutes to implement. Thanks!

    Copy & paste the code below to embed this comment.
  55. Thanks so much for this great and easy to use script! While I made something like this in JavaScript the other day, your solution is much more elegant! :)

    Copy & paste the code below to embed this comment.
  56. Liked the rotator, downloaded and trialled it locally on my machine, worked fine, uploaded files onto webserver, with structure intact and keep getting the following error message.

    Fatal error: Call to undefined function: showimage() in /home/ridiikn/public_html/index.php on line 18

    Copy & paste the code below to embed this comment.
  57. The rotator shows only one image every time..

    Copy & paste the code below to embed this comment.
  58. Yeah, something was funky on my ISP’s server. The script worked fine on my local dev server as is…but once I uploaded to their environment - random was not random.

    Manually seeding before the array call seems to work:

      # pick a random image from the parsed config file
      srand();
      $img = array_rand($images);

     

    Copy & paste the code below to embed this comment.
  59. Looks great, seems perfect—but won’t work for me! all broken images like the other poster.

    I e-mailed my host—I bet it’s on their side, as this works so beautifully on so many other sites.

    Thanks a lot.

    David

    Copy & paste the code below to embed this comment.
  60. Using a simple text .ini cought my eye because it was easy for me to implement.

    I too would like an example of adding a caption line. That way I could write something simple in the .ini file and the variable would display my caption. I am all alone and have to teach myself, so any example is like gold.

    I didn’t get much help from all the comments about how XML would be better or how it would be easier to use MySQL. I would love to study an example of that code.

    Copy & paste the code below to embed this comment.
  61. Yes, those comments didn’t help me either :)

    If you have a “better way” you really probably should just write your own article, or privately e-mail the authour.

    Richard, as an up and coming PHP student, what did you think about my problem?

    If anyone wants to see it in person:

    http://www.davidstreever.com/index.php

    Make sure you use that FULL ADDRESS, as I have another “index.html” there. I did try this without that—and got the same errors.

    If I make the php file point to /images.ini, it tells me it “can’t read the ini file”. If I tell it to go to “images.ini”, then it displays the broken image link.

    Either of those two links, however, should work—which is what has me baffled!

    Copy & paste the code below to embed this comment.
  62. Hello,

    Thanks for the great script. I got it to work, but one question remains: how do I get rid of the border? Normally I use “Border=0” in an img tag, how do I get the same result using this script?

    Thanks in advance.

    Copy & paste the code below to embed this comment.
  63. Hey all,

    I needed to incorporate a few things in the script, including border. You can see the results here: http://www.unitedthisistheway.com and the script is here: http://www.unitedthisistheway.com/rotator.php

    This is a PHP hack, something I did to get it working…probably not the best code example…you’ve been warned :-)

    Copy & paste the code below to embed this comment.
  64. http://www.unitedthisistheway.com/rotator.txt

    Copy & paste the code below to embed this comment.
  65. Everytime I reload the page I get one of the first three images in the .ini file. I have five total, and if I move the two ones that never load to the top, they load but the last two don’t.

    I have a random text script also, but it is actually random, so it might not be a server problem.

    Copy & paste the code below to embed this comment.
  66. There was something that you never answer in the other image rotator that I wanted to address to you. You said you can link to the img via <img src=“http://website.com/rotate.php”

    Copy & paste the code below to embed this comment.
  67. Why php, .net or xml when you can achieve the same result in javascript using less amount of code..? Just create an array containing the desired info and randomly display it through a javascriptfile that you call from the html-page..

    Copy & paste the code below to embed this comment.
  68. Mike, I’d bet because Javascript is client side, and PHP isn’t…

    I’d personally rather stay AWAY from javascript when possible.

    As for the “no borders” questions—

    remember guys, this is CSS!!!! How do you get rid of borders?

    In your css file, you have a line like this:

    “a img {
    border: none;
    }” (minus the “)

    Copy & paste the code below to embed this comment.
  69. This image rotator is great! 

    Is it possible to have a group of pictures shown in sequential order for a particular computer?  Maybe with a cookie and some javascript?

    Brian Smith
    Albany, NY

    Copy & paste the code below to embed this comment.
  70. Even though I had a capable GD configuration this wasn’t working for me, but I found the problem was using an absolute path like in the ini file like “/images/myimage.jpg” but if I used a relative path “../images/myimage.jpg” all was well in the world.

    Maybe this will help other newbies like me who this script suits just jim-dandy.

    Copy & paste the code below to embed this comment.
  71. I had a similiar problem with the last images not showing up, and also parts of URL’s being cut off (those with query strings). The problem was having a character that parse_ini_file couldn’t deal with like an “=” in the url or a “!” in the alt line.

    The fix is to enclose it in double-quotes like this:

    alt = “XML! Why would I want to parse XML for 3 images?”
    url = “path/to/file?with=querystring”

    Wish that tip would have been in the article, I’m just a newbie and that would have saved me a bunch of time and hair.

    Copy & paste the code below to embed this comment.
  72. Another idea would to make a table in phpMyAdmin with pic- date on- date off- link fields . Have the php script check the server date and show the image (with appropriate link) on the page .A form could then be used to enter the information so the webmaster would have only to set up the images(maybe with the images showing and radio buttons to choosethe image) and someone administering the website could make the changes.

    Copy & paste the code below to embed this comment.
  73. Ok this works for small images, but, what if the images i want to display need to be broken into four sections can the code be modified or is there a better solution?

    Copy & paste the code below to embed this comment.
  74. why do you need a old fashined .INI file while you can store the same information in the pictures?

    Copy & paste the code below to embed this comment.
  75. I used the basic rotator without the *ini file. I called the image from using the <img > but my page would not validate. I did not realise you could call .php from in a css background selector. Awesome work. Thanks a lot dude.

    Copy & paste the code below to embed this comment.
  76. Having a bit of trouble getting it to work. It looks way simplier than the ‘javascript’ rotator I have been using. The code to placed at the top , is that top of the body or in the head or at the top of the file?
    Thanks

    Copy & paste the code below to embed this comment.
  77. Hello,

    due to the lack of dynamic pages (I let Movable Type generate .html files where ever possible) I still use the old image rotator. If you have a look at our website, e.g.

    http://www.adandbreakfast.com/a/k/Mission.html

    where the large picture at the top is delivered by the image rotator php script. If you click through the site the picture never changes, though - if you reload a page - the picture changes once but then stays for the rest of the site. Is this a kind of caching isue?

    Yours, Yves

    Copy & paste the code below to embed this comment.
  78. Hello,

    due to the lack of dynamic pages (I let Movable Type generate .html files where ever possible) I still use the old image rotator. If you have a look at our website, e.g.

    http://www.adandbreakfast.com/a/k/Mission.html

    where the large picture at the top is delivered by the image rotator php script. If you click through the site the picture never changes, though - if you reload a page - the picture changes once but then stays for the rest of the site. Is this a kind of caching isue?

    Yours, Yves

    Copy & paste the code below to embed this comment.
  79. Thanks for the article.

    I am curious about the question mark at the end of the line in the line:
    $id = $images[$img][‘id’] ?

    Why is it not a semicolon?

    If this is a conditional statment I could not find any PHP documentation.

    I also had to add the line:
    srand ((float) microtime() * 10000000);
    before the rand_array .

    Copy & paste the code below to embed this comment.
  80. I tried to use this easy way of random showing images on a site that uses frames. Using the url to point to other pages is no problem since the referred page can be shown in the same frame, but that is obviously not so with an image that links to another site. So, is it possible to add something like:
    target = blank
    to the ini-file?

    Copy & paste the code below to embed this comment.
  81. Somebody was asking about using this script without having to change all their .html files to .php. Well, if you’re running on Apache then chances are you can use a Server Side Include (SSI) call to insert the script’s output into your HTML. You’ll need to check with your host about support, but if you can do it then something like this should work:

    <!—#include virtual=“imagerotator.php”—>

    Just get the script to output the entire IMG tag, and put the above line where the IMG tag would be.

    http://httpd.apache.org/docs-2.0/howto/ssi.html

    Copy & paste the code below to embed this comment.
  82. congratulations for the article.

    Copy & paste the code below to embed this comment.
  83. I want to implement rotating .swf files on my site.  I tried to just call them up as images in th .ini file, but to no avail.

    Copy & paste the code below to embed this comment.
  84. Great article - Can someone post the code on how they would use the class and id tags, both on the .ini file and the index.php file?

    I am trying to “style” the way the image appears when called up by the rotator script. (I would like to get rid of the standard “a href border” around the image.

    Thanks much - and any help appreciated.

    Rob H

    Copy & paste the code below to embed this comment.
  85. Does ALA not even bother to maintain their forums anymore? Where’s apartness when you need him. Oh yeah…he has a daughter now.

    I tried to port this method to generate not just one image, but five. I cannot get it to work.

    Copy & paste the code below to embed this comment.
  86. Hello,

    Personally I love the Random Image script. I was just wondering if someone could please help me figure out how to add a target to the A HREF tag.

    Many Thanks!

    Copy & paste the code below to embed this comment.
  87. Dan:
    First of all, great script!
    Secondly, it is a common practice for guys like me (certainly no PHP experts) to want to implement scripts without realizing that special characters can cause big time problems. Let me give you an example in your rotator.php script.
    Please TELL everybody that one MAY NOT include ! in the title line of the images.ini file.
    If your configuration page warned about this, I certainly missed it. So:
    title = Donald Trump lives at a casino   (works)
    but
    title = Donald Trump lives at a casino!
    (does not work!!!!!!)
    This can cause people like me to go crazy trying to fix a perfect working script!

    Copy & paste the code below to embed this comment.
  88. hi guys,

    great article. Have a question though..  it would be nice to have images with some hotspot-links in them. I mean not the entire image pointing to an url link, but the image would have different parts pointing to different   urls ?

    how can this be accomplished ? any ideas..

    thanks,
    vasu.

    Copy & paste the code below to embed this comment.
  89. I have read the above and it did state that the code would correct the sizing automaticly, but in mine it did not i am using the code above and was wanting to know in this code <?php showImage (); ?> is there a way to addin the width or height. A very specific code that i can copy and paste would help. Or a step by step comfig in english would help.

    Copy & paste the code below to embed this comment.
  90. there’s something about random image rotation that’s fun to think about.

    i built one of these using php/mysql. you can set up fields for width, height, title, photographer_id and whatever information you want to associate with each image. get a random image_id each time by using the mysql funtion rand() to randomly order the returned rows. then just limit or display the first row. an example sql query…

    select image_id, photographer_id, title, image_path from images_random order by rand() limit 0, 1

    you make a database call each time a page loads, but it works as fast as any other random rotator i can recall.

    in the admin area set up a page that lets admins add/delete images from the server while keeping the database updated.

    Copy & paste the code below to embed this comment.
  91. Brad,

    if you want your solution to work with border=0 then you need to qualify that in the code.

    Something like
    $border = $images[$img][‘border’]!=null ? sprintf( ’ border=”%s” ‘, $images[$img][‘border’] ) : ‘’;

    If the border element is set to zero then the statement as is written in your code will always return false and a blank.

    Copy & paste the code below to embed this comment.
  92. This is on the face of it an excellent idear to have a php script that can be included in a php file that rotates various images round each time you load up the page….

    However I have tried to get it to work a number of times and failed completely.. the script uses an ini file and sometimes shows a jpg file I have on the server but somtimes fails to load a picture and instead just shows a tiny red cross and no image….

    It is very disappointing that it appears not to work correctly
    I would like to accept e mail about this in an attempt to correct this.. but feel that there must be several things wrong, either with the format of the ini file or the rotator.php script or both…........
    Help>>>>...???

    Copy & paste the code below to embed this comment.
  93. it’s extremely slow… been testing the script, watching the ‘activity viewer’ as it downloads the test-page, sometimes it loads fast, but most of the time the download of the page grinds to a halt when it starts downloading the rotator.php file

    Copy & paste the code below to embed this comment.
  94. will it work with text not images?

    Copy & paste the code below to embed this comment.
  95. This script will only use the first image listed in the .ini file.  I tried messing around with rotation.php but nothing worked. 

    From what I can see, either the ini isnt working correctly, or the rand() command isnt working for some reason.

    Can anyone help me here?

    Copy & paste the code below to embed this comment.
  96. well i know whats breaking it, but not sure how to fix it ;-)

    the problem is the .ini files. if you have an url with a querystring appended to it, the array that parses the ini trips over and everything explodes in a big flaming fireball.

    please please mr benjamin can you implement querystring support?

    Copy & paste the code below to embed this comment.
  97. well, i fixed it. if your url has a querystring in it. wang some quotes around the ini entry.

    eg;

    url   = “think.php?id=43&category=life”

    thanks for great little script benjamin.

    Copy & paste the code below to embed this comment.
  98. I can get this to work, but I am having trouble with using it in sub-directories. Ideally, I want to be able to use this with some variables.

    For example, I want to set a variable for the root directory so that the “rotator.php” can be accessed by going to to the root level ($root/rotator.php). However, when I try to do this, I get an error with the showimage() function (Fatal error: Call to undefined function: showimage() in ...) 

    Any ideas of how to fix this?

    Copy & paste the code below to embed this comment.
  99. Is there a way to rotate images on a certain interval using only PHP? or at least clean JS? I was thinking of implementing a session ID… but that requires session code on each page. Any suggestions?

    Copy & paste the code below to embed this comment.
  100. it is possible to create several links at different places from the loaded image ?

    Any ideas of how to do this?

    Copy & paste the code below to embed this comment.
  101. i’m trying to add the ‘better image rotator’ from

    http://www.alistapart.com/comments/betterrotator/

    on to www.rapnews.co.uk

    as you can see, the command in my sidemenu is showing as code, and not the image.

    Copy & paste the code below to embed this comment.
  102. I found a way to put several links at different places from the loaded image. I used CSS Style sheet.
    For the moment, my new site is visible at :
    http://web.design.creation.free.fr/azurid/
    As you can see, “image rotator” generates a random image on my first web page. And one can click on various links.
    If you are interesting by this. Contact me.
    Flip flop.

     

    Copy & paste the code below to embed this comment.
  103. I’m getting the error

    Unable to read ini file.

    Can anyone help? It’s got the correct code inside and is in the correct folder.

    Copy & paste the code below to embed this comment.
  104. can we see your script inside the ini file ?
    and the path you used to call it ?

    Copy & paste the code below to embed this comment.
  105. content of ini:

    [Headnod]
    src   = images/headnod.jpg
    alt   = Headnod.co.uk
    url   = http://www.headnod.co.uk/
    title = Headnod

    [Tony]
    src   = images/advert.jpg
    alt   = Advert
    url   = http://www.rapnews.co.uk/
    title = Advert


    The path is as instructed on this site’s implementation instructions.

    Copy & paste the code below to embed this comment.
  106. 1/ I suppose that the content of “.ini” is written like this :

    [Headnod]
    src = images/headnod.jpg
    alt = Headnod.co.uk
    url = http://www.headnod.co.uk/
    title = Headnod

    2/ Are you sure that you call the right “.ini” file in the rotator.php script ? :

    <?php
      $IMG_CONFIG_FILE = ‘images.ini’;
      .........................

    Copy & paste the code below to embed this comment.
  107. 1/ I suppose that the content of “?.ini”? is written like this :


    [Headnod]

    src = images/headnod.jpg

    alt = Headnod.co.uk

    url = http://www.headnod.co.uk/

    title = Headnod

    Copy & paste the code below to embed this comment.
  108.  
    Just for saying that the exemple is now visible at :

    http://www.azurid.com/

    As you can see, “image rotator”? generates a random image on my first web page. And one can click on various links. If you are interesting by this. Contact me. Flip flop.

    METTRE PLUSIEURS LIENS SUR L’IMAGE chargée par rotator !!!

      Juste pour dire que le lien qui montre l’exemple a changé. L’exemple est maintenant visible sur la page d’accueil de mon site (une fois sur la page, réactualisez le site et l’image change) :

      http://www.azurid.com/

     

    Copy & paste the code below to embed this comment.
  109. The first link (a better rotator) shows an error message from Rails

    Copy & paste the code below to embed this comment.
  110. I did not see a solution to the previous post on this problem, and would like to add that I get the folowing error message:
    Warning: Error parsing images.ini on line 3 in Unknown on line 0

    this displays on the line above the image that displays.

    Any help appreciated.

    Copy & paste the code below to embed this comment.
  111. Hrumph- turns out it was the exclaimation (!) points interrupting the parsing of the .ini file (I had included them in the alt’s)- this is new to me.

    Copy & paste the code below to embed this comment.
  112. Your script is good. But when i used it, I ran into 2 problems. It was slow in retrieving each random image. But it also created firewall problems on two different machines. For this reason i had to stop using it. I currently use the solution given at http://www.tutorialized.com/tutorial/Simple-Image-Rotater/790. This is a block of code you insert into your main php file and does not reference an external file. This seems much quicker than the ala solution and also have had no firewall problems. However, I want to thank you sincerely for introducing me to the concept of image rotation.

    Copy & paste the code below to embed this comment.
  113. I can’t seem to get the script to parse more than two sections. Is this a limitation of the php function or am I doing something wrong?

    Copy & paste the code below to embed this comment.
  114. Is there a way to modify this script to attach specific captions to an image?

    Copy & paste the code below to embed this comment.
  115. The rotator script works beautifully.  However I want to rotate .swf header movies on my home page.  I guess I would need to change the $extLit value, but what would that be to display random .swf movies?

    Thanks

    Copy & paste the code below to embed this comment.
  116. I too would be interested in a way to display the title under the image. As it sits now, it’s not useful for my application.

    Thanks

    Copy & paste the code below to embed this comment.
  117. Unfortunately, our servers at work do not support PHP. Can someone post a link to a non-PHP method. Preferabley ColdFusion or Javascript. Thanks!

    Copy & paste the code below to embed this comment.
  118. An exemple of image rotator :
    http://groupe.argentis.free.fr

    Copy & paste the code below to embed this comment.
  119. Microsoft Visual Studio 2005,which has got an component called “AdRotator”.I really like it,it works as well as the author’s work.Thanks to the author, now I know how it works.

    Copy & paste the code below to embed this comment.
  120. i put all the code in a folder called artist, and when i say <?php include(‘artist/index.php’) ?> nothing happens….please help im new to php!!

    Copy & paste the code below to embed this comment.
  121. Yes, adding a caption is possible. First, add a caption variable to the script:

    $caption = $images[$img][‘caption’];

    Next, edit the script to incorporate the caption variable into the HTML ouput. Something like this:

    if ($caption) {
    printf('%s.', $caption);
    }

    Last, add a caption line to each block in the .ini file.

    Copy & paste the code below to embed this comment.
  122. Not sure why, but the first part of that PHP code got a little munged in transit. I’ll take another stab; perhaps the ALA admin would be good enough to help if it comes out wrong again? :).

    #get the caption

    $caption = $images[$img]['caption'];
    Copy & paste the code below to embed this comment.
  123. .

    I am using Gallery 1.X.

    Right now everything is in this path, images, rotator, index, .ini, ... Everything. ...

    http://www.classannual.com/php/gallery/rotateJax/

    That works.

    But I just cannot get it included in the actual gallery pages. ... On this page I have a random image. ...

    http://www.classannual.com/php/gallery/

    I would like to replace that Random image with a RandomImagePlusLink, like this BETTER IMAGE ROTATOR tool generates in rotateJax.

    Since Gallery has a bunch of includes, The index is in the gallery folder, where would I place the folder with my images, my ini file, my rotator, and what would my php include say? ...

    How do I address paths in PHP?

    Jack

    Copy & paste the code below to embed this comment.
  124. .

    http://www.classannual.com/php/gallery/

    The image in the upper right is random, and it links. ...

    There are about 2600 image/link pairs in the ini file right now. ...

    It seems to work for me!

    Copy & paste the code below to embed this comment.
  125. I can get the gallery front page to work, but when I bounce off the page and navigate to another gallery page with a set of albums, then try to go back to the top page, I get an error. ...

    I am not a wood nymph, but I think there is a troll in my machine.

    Copy & paste the code below to embed this comment.
  126. I am hoping that someone can help me figure out how to have the links open in a new browser window.  Does anyone know where I need to put the “target=_blank” command in the ini or the configuration file?

    Copy & paste the code below to embed this comment.
  127. I have been using your ROTATOR script for about a year and I really enjoy its performance. I have approximately 200 images on my web site that I rotate. Each image is linked to a synopsis of a book. I was using one images.ini file but found that many of the images repeated before all of the images were displayed. Many of the images are never displayed. I broke the images file into 12 different files and that improved the performance but I still have the problem that images repeat before all are displayed.

    Is there a method that will insure that all images are displayed before any one is repeated?

    I have also tried to implement the CAPTION mod but I could not get it to work. Thanks for any help you can provide.

    Thanks
    Buddy

    Copy & paste the code below to embed this comment.
  128. A friend refered me to your post. I have used a similar block of code for a random image module. //Spit it out
    $limit=count($image);$limit—;
    $randnum=rand(0,$limit);
    // $size=getimagesize(”$directory$image[$randNum]”);

    $filename = “$directory$image[$randnum]”; // Slipstream our content into the template
    eval(’$home[$mods[\‘modid\’]][\‘content\’] = ”’ . fetch_template(‘adv_portal_random_video’) . ‘“;’); ?>

    I’d like to know how I can make it call the most recently uploaded image, rather than a random one.

    Copy & paste the code below to embed this comment.
  129. Can anyone tell me what I am doing wrong? I have added the caption mod but it wont work.

    I also added caption to the ini file like this.

    [11]
    src   = /images_used/067188770X_small.jpg
    alt   = Betty Crocker’s Vegetarian Cooking
    url   = /usedbooks/cookbooks.htm#Betty Crocker’s Vegetarian Cooking
    title = Betty Crocker’s Vegetarian Cooking
    caption = Betty Crocker’s Vegetarian Cooking

    */

      # file containg your image descriptions

      $IMG_CONFIG_FILE = ‘images.ini’;

      # You shouldn’t need to change anything below this point

      function showImage( $ini=null ) {
    global $IMG_CONFIG_FILE;
    # if no custom ini file has been specified, use the default
    $ini_file = $ini ? $ini : $IMG_CONFIG_FILE;
    # read the config file into an array or die trying
    $images = @parse_ini_file($ini_file,true);
    if (! $images) {
    die('Unable to read ini file.');
    }
      # pick a random image from the parsed config file
      $img = array_rand($images);
      # get the selected image’s css id if one exists
      $id = $images[$img][‘id’] ?
        sprintf( ’ id=”%s” ‘, $images[$img][‘id’] ) :
        ‘’;
      # get the selected image’s css class if one exists
      $class = $images[$img][‘class’] ?
        sprintf( ’ class=”%s” ‘, $images[$img][‘class’] ) :
        ‘’;
      # get selected image’s dimensions
      $size = @getimagesize( $images[$img][‘src’] );
      # if an url was specified, output the opening A HREF tag
      if ( $images[$img][‘url’] ) {
    printf(
    '’,
          $images[$img][‘url’],
          $images[$img][‘title’]
        );
      }
      # output the IMG tag
      printf(
        ‘%s’,
        $images[$img][‘src’],
        $images[$img][‘alt’],
        $size[3],
        $id,
        $class
      );
      # if an url was specified, output the closing A HREF tag
      if ( $images[$img][‘url’] ) {
    echo('
    ');
    }
      <pre>$caption = $images$img;<pre>
      if ($caption)  {
    printf('%s.', $caption);
    }

      }

     

    ?>

    Copy & paste the code below to embed this comment.
  130. I have the script running perfectly on my own laptop testing server, but when i uploaded the pages to the web, I get the above error.

    can anyone shed any light on the subject.

    the include statement is in the correct place at the top of the page, and as i said works fine on my laptop.

    thanks for all your help in advance.

    Russ

    Copy & paste the code below to embed this comment.
  131. I had a reaaly good ranking in Google - until i rolled this out on my entire site. I have consitently held a rank of between number 1 to number 3 of the search results for atleast the last 6 months. If search rankings bother you, consider something else.

    Those having troubles with it finding the INI file… I had to enter my full server path to the ini file. If you dont know this your host will be able to tell you.

    Copy & paste the code below to embed this comment.
  132. I can’t get the captions to work… this is what I put in the .php file:

    # add caption
    $caption = $images[$img];
    if ($caption) {
    printf('', $caption); }

    and added “caption = ” to the .ini file. Can someone help? Thx.

    Copy & paste the code below to embed this comment.
  133. Hi great code works perfect is there a way to out the images at a certain size.

    thanks

    Copy & paste the code below to embed this comment.
  134. I have your script working on my site and am wondering if there is a way to give each image a click-through address?

    I am asking because the images that I want to add to our site are ads.

    Thanks for the great script!  This is my first excursion into PHP and it worked perfectly without any hitches at all.

    Copy & paste the code below to embed this comment.
  135. I liked the simplicity of rotate—except that since it had an image
    path that was fixed, the browser would cache that image.  So if I used
    it as part of my sidebar menu system then it would not change the image
    as I moved from page to page, unless I explicitly reloaded the page.

    I like rotator’s actually writing the link in, and the various features for adding information to it.

    In the long run I can see the possiblity of a suite of similar tools.

    With rotator you must hand edit a file for the directory.  It would make
    better sense to write a file per image. Give the text file the same name as the image file, but a different extension. In this way, the manipulation
    of the file and the image can be done together, without messy edits.

    This also allows for the non-existence of the extra information.

    I’m brand new to php, but I’ve done some perl before.  I’m going to try
    to make a minimalist rotate that writes image links, using bits from
    both programs.

    Thanks for the two progs.

    ***

    Much of the time there is no need to specify the size of the image. That can be offloaded to the browser.  Use your css to specify how big
    you want the image to be in the containing div.

    Copy & paste the code below to embed this comment.
  136. I’ve found this code quite useful, but I too am trying to figure out where to insert a TARGET=_BLANK so as to open links in a new window.

    also of secondary interest would be to add a Border=0 feature

    Copy & paste the code below to embed this comment.
  137. Does anyone get the error messages on lines 44 & 48 of the rotator.php file saying undefined index. I don’t need the id for styling, but have created the id in the style sheet to see if it goes away and it doesn’t. It doesn’t affect the rotator when uploaded but I hate error messages on my testing server. Any help??

    Copy & paste the code below to embed this comment.
  138. In order to get only unique images add the following to rotator.php script above the ‘get the selected image’s css id if one exists’ statements (note: you only require one ‘pick a random image from the parsed config file’ statement):

    //initialise array if it has not been created
    if ( empty($_SESSION) ) {
    $_SESSION['selected_pics_array'] = array("0");
    }

    // pick a random image from the parsed config file
    $img = array_rand($images);

    //ensures that the image is unique
    while(in_array($img,$_SESSION[‘selected_pics_array’])) {
    $img = array_rand($images);
    }

    //add the image to the list of displayed images
    array_push($_SESSION[‘selected_pics_array’], $img);

    Also put the following above your <html> tag:
    <?php session_start(); ?>

    After adding all of your “<?php showImage(); ?>” statements add the following:
    <?php
    session_destroy();
    ?>

    Copy & paste the code below to embed this comment.
  139. I am new to PHP but the script is working fine for what I want…only how do I get rid of the border that is automatically being added to my photos? I dont want a border at all…

    Thanks

    Copy & paste the code below to embed this comment.
  140. Going way back to #4’s request. Can this script be adapted to display only text links instead of banners. I haven’t had any success isolating the ‘caption’ part and suppressing the image

    Copy & paste the code below to embed this comment.
  141. This was a great script but how do you set it up on a timer?

    Copy & paste the code below to embed this comment.
  142. 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.
  143. 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 600x400 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.
  144. 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.
  145. 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.
  146. 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.
  147. Can you add a tooltip to each image?

    Copy & paste the code below to embed this comment.
  148. 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.
  149. 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.
  150. 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.
  151. 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.
  152. Sorry, commenting is closed on this article.