SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member abitanga's Avatar
    Join Date
    Nov 2000
    Location
    Dystopia
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Random set of images on refresh

    Hi all,

    Hoping someone can help me out. I'm looking for a javascript that will change a set of 3 related images on refresh.

    Please have a look at http://www.hp.com to see what I mean. Everytime you refresh the site, some of the images change.

    I've tried looking for a script that will do the same but I keep coming across javascripts that will change just one image randomly or change multiple images randomly but the images aren't related.

    I also have seen PHP scripts with full-fledged features and an admin panel where I can create ad farms to accomplish my goal but I think that's overkill.

    Does anyone know where I can find this javascript? FYI, I am weak at writing javascript myself so that's why I'm looking for a cut-and-paste script.

    Regards,

    Anna

  2. #2
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Using the logic of the HP page as a base, I cobbled together this: DEMO

    If you were going to use this method, then I'd suggest preloading the graphics.
    Code:
    <html>
      <head>
    	<title>Random Image Groups</title>
    	<script type="text/javascript" language="JavaScript">
    	  // Define styles
    	  var seg_choices = new Array('red', 'blue', 'green', 'yellow');
    	  
    	  // Set images for each style
    	  var src_imgs = new Array();
    		src_imgs['red'] = new Array('red1.gif','red2.gif','red3.gif');
    		src_imgs['blue'] = new Array('blue1.gif','blue2.gif','blue3.gif');
    		src_imgs['green'] = new Array('green1.gif','green2.gif','green3.gif');
    		src_imgs['yellow'] = new Array('yellow1.gif','yellow2.gif','yellow3.gif');
     
    	  // Select random style
    	  var cycle = seg_choices[Math.floor(Math.random() * seg_choices.length)];
    	  
    	  // Define display images as images for randomly-chosen style
    	  var display_imgs = new Array(src_imgs[cycle][0],src_imgs[cycle][1],src_imgs[cycle][2]);
     
    	  // Display chosen images in table
    	  document.writeln('<table><tr>');		
    	  document.writeln('<td><img src="'+display_imgs[0]+'"><\/td><td><img src="'+display_imgs[1]+'"><\/td><td><img src="'+display_imgs[2]+'"><\/td>');
    	  document.writeln('<\/tr><\/table>');
    	</script>
      </head>
      <body>
    	  <!--
    	  You can display the image(s) anywhere you like by placing the following code
    		where you want the image displayed within your HTML Body:
    		 
    	  <script language="JavaScript" type="text/javascript">
    		document.writeln(display_imgs[1]);
    	  </script>
    	  //-->
      </body>
    </html>
    Andy
    From the English nation to a US location.

  3. #3
    SitePoint Member abitanga's Avatar
    Join Date
    Nov 2000
    Location
    Dystopia
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Andy! I'll try it out.

    Anna

  4. #4
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
    <title>untitled</title>
    <base href="http://www.SitePoint.com/graphics/">
    </head>
    <body style="background:silver;">
    <table style="margin:100px auto;text-align:center;border:1px black solid;background:silver;">
    <tr>
    <td><img id="pic1" width="56" height="67" src="pixel.gif"></td><!-- placeholder (1 px transparency) -->
    <td><img id="pic2" width="56" height="67" src="pixel.gif"></td><!-- placeholder (1 px transparency) -->
    <td><img id="pic3" width="56" height="67" src="pixel.gif"></td><!-- placeholder (1 px transparency) -->
    </tr>
    </table>
    <script type="text/javascript" language="javascript">
    
    //////////////////////////////////////////////////////
    // image urls, in nested arrays, no trailing comma! //
    //////////////////////////////////////////////////////
    
    var img_urls = [ 
    			[ 'v2/heads/default3.jpg' , 'author_andrew.jpg' , 'nigel.jpg' ] , 
    			[ 'author_ivan.jpg' , 'mike.jpg' , '1kev.jpg' ] , 
    			[ 'author_josh.jpg' , '1danielk.jpg' , 'patrick.jpg' ]
                   ];
    
    ////////////////////////////////////////////////////////
    // image ids (HTML), should match nested array length //
    ////////////////////////////////////////////////////////
    
    var pic_ids = [ 'pic1' , 'pic2' , 'pic3' ];
    
    ////////////////////////////////////////////////////////
    
    var idx_array, idx_str, n, grpLen = img_urls[0].length, preloadArr = new Array(grpLen);
    if (!/__RANDOM_IMAGE_ROTATOR__/.test(self.name)) //first time, randomize indices
    {
    	var idx, i, ind1, ind2, temp, arrLen = img_urls.length;
    	idx_array = new Array(arrLen);
    	for (i = 0; i < arrLen; ++i)
    		idx_array[i] = i;
    	for (i = 0; i < arrLen; ++i)
    	{
    		ind1 = Math.floor(Math.random() * arrLen);
    		ind2 = Math.floor(Math.random() * arrLen);
    		temp = idx_array[ind1];
    		idx_array[ind1] = idx_array[ind2];
    		idx_array[ind2] = temp;
    	}
    	idx_str = idx_array.join(',');
    }
    else 
    {
    	idx_str = self.name.split('__RANDOM_IMAGE_ROTATOR__')[1]; //been there, get indices
    }
    
    idx_array = idx_str.split(','); //de-serialize
    var first_idx = idx_array.splice(0,1); //get first index
    idx_array[idx_array.length] = first_idx; //rotate
    for (n = 0; n < grpLen; ++n) //display
    	document.getElementById(pic_ids[n]).src = img_urls[first_idx][n];
    idx_str = idx_array.join(','); //serialize
    self.name = '__RANDOM_IMAGE_ROTATOR__' + idx_str; //store indices
    
    //////////////////////////////////////////////////////
    // fetch next group - CAUTION: uses onload handler! //
    //////////////////////////////////////////////////////
    
    onload = function()
    {
    	for (var i = 0; i < grpLen; ++i)
    	{
    		preloadArr[i] = new Image();
    		preloadArr[i].src = img_urls[idx_array[0]][i];
    	}
    }
    
    </script>
    </body>
    </html>
    
    ::: certified wild guess :::

  5. #5
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by adios
    placeholder (1 px transparency)

    Google doesn't like to find pics of 1px, make them 10px instead, not much more memory size.
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  6. #6
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by adios
    Code:
    
    if (!/__RANDOM_IMAGE_ROTATOR__/.test(self.name)) //first time, randomize indices
    {
    	var idx, i, ind1, ind2, temp, arrLen = img_urls.length;
    	idx_array = new Array(arrLen);
    	for (i = 0; i < arrLen; ++i)
    		idx_array[i] = i;
    	for (i = 0; i < arrLen; ++i)
    etc.....
    
    I hope that works a heck of a lot better than it reads


    Andy
    From the English nation to a US location.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •