How to create a alternating image per page load on webpage

Discussion in 'Web Design and Development' started by nfable, Mar 4, 2009.

  1. nfable macrumors regular

    nfable

    Joined:
    Apr 9, 2007
    #1
    What I'm looking for is a solution to achieve the effect on http://toddlambert.com/ in his box labeled 'portfolio', in which the displayed sample image/link changes every time the page is refreshed.

    I use iWeb right now and am learning DWeaver... Any thoughts welcome

    thx,
    nf
     
  2. lucidmedia macrumors 6502a

    Joined:
    Oct 13, 2008
    Location:
    Wellington, New Zealand
    #2
    PHP is probably the most efficient way to do this.

    Google "PHP image rotation" or something similar and you will find plenty of free scripts that you can paste into your source code.
     
  3. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #3
    For an iWeb site you're mostly limited to a JavaScript based solution unless you're on a web server that has PHP and then you could find a way, but could be a tad effortful. Either PHP or JavaScript, the solution is pretty simple. You just create an array with the destinations to the images then just random pick one to display.
     
  4. nfable thread starter macrumors regular

    nfable

    Joined:
    Apr 9, 2007
    #4
    Sweet

    Thanks guys, I'll look around; I find most of the problem is finding the terminology of which to search for, and you gave me some good terms... thx

    nf
     
  5. frankblundt macrumors 65816

    frankblundt

    Joined:
    Sep 19, 2005
    Location:
    South of the border
    #5
    there are several jQuery implemenations for slide shows that do what you want plus a whole lot more - like this one
    jQuery is pretty powerful and relatively simple to get the hang of.

    the general principle applies to most of them - make a div with all of the images in it, hide all of them with CSS and then use jQuery/Javascript to show them at random (either running just the once to show a single, random image on each page load, or with a timer function to slideshow them)

    you'll need to include the jQuery library, but if you link to it like this
    Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
    then at least visitors who've been to other sites that use it like this will have it cached

    a simple run-once pure javascript version is here (the second example)
    ... and several zillion others
     

Share This Page