Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: need help with script for random images

  1. #1
    Join Date
    Oct 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question need help with script for random images

    i have to load random images on a page...

    ther are 5 sets of images and about 15 images in each set

    set 1 contains imga1, imga2, imga3, imga4, imga5, ...
    set 2 contains imgb1, imgb2, imgb3, imgb4, imgb5, ...
    and so on for 3 more sets

    on page load, i want to display in a random order, images from any 1 set...

    so if its from set 2, it should load
    imgb5, imgb6, imgb9, imgb3, imgb1, ...

    if its from set 3, it should load
    imgc4, imgc3, imgc7, imgc2, imgc8, ...

    each image has to be from the same set
    and it shouldnt repeat

    can anyone help???

    also...

    if i have to load on the same page omages from set 1 in 1 div
    and from set 2 in another div, is it possible?
    Last edited by flyingfish; 10-13-2006 at 09:42 PM.

  2. #2
    Join Date
    Oct 2006
    Location
    New York, NY, USA
    Posts
    262
    Thanks
    42
    Thanked 24 Times in 24 Posts

    Default

    Me too! Prospective client has many categories but wants 3 images displayed. There are great DD scripts for random slide shows. I just want 3 static sets (or 3 positions) on same page to load randomly to give diversity to page, e.g., http://artdemo.tripod.com Random text captions to load with each image would be nice too (already have DD's http link examples).

  3. #3
    Join Date
    Oct 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation

    anyone????

  4. #4
    Join Date
    May 2006
    Location
    Sydney, Australia - Near the coast.
    Posts
    1,995
    Thanks
    0
    Thanked 8 Times in 7 Posts

    Default

    Like this?

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    .slideSet	{
    
    	display:none;
    }
    </style>
    <script language="javascript" type="text/javascript">
    //Random Image Set
    //By Peter Nguyen
    //Dynamic Drive Forums User: tech_support
    //Visit: www.dynamicdrive.com/forums
    //This note must stay intact for legal use
    
    var slideSetId = new Array(); //Slide Set Array
    slideSetId[0] = "slide0" //Slide Set 0
    slideSetId[1] = "slide1" //Slide Set 1
    slideSetId[2] = "slide2"
    
    //Add more in the form of slideSet[number] = "your id here"
    
    var slides = 2 //How many slides there are
    
    function initSlideSet()	{
    
    	slides1 = slides+1
    	slideSetCount = Math.floor(Math.random()*slides1)
    	document.getElementById(slideSetId[slideSetCount]).style.display = 'block'
    }
    window.onload=initSlideSet
    </script>
    </head>
    
    <body>
    <div id="slide0" class="slideSet">Slide Set 1</div>
    <div id="slide1" class="slideSet">Slide Set 2</div>
    <div id="slide2" class="slideSet">Slide Set 3</div>
    </body>
    </html>
    It can do content as well as images.
    Peter - alotofstuffhere[dot]com - Email Me - Donate via PayPal - Got spare hardware? Donate 'em to me :) Just send me a PM.
    Currently: enjoying the early holidays :)
    Read before posting: FAQ | What you CAN'T do with JavaScript | Form Rules | Thread Title Naming Guide

  5. #5
    Join Date
    Oct 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up works but need a little more help

    thanx peter

    it works... but i would like to randomly load images in the individual sets...

    so if ther r 5 imgs in a particular set...

    each time the page is loaded, any one of the images has to be displayed

    n then after a set duration of may be 5 seconds... another image from the same set has to be loaded....

    i m trying to work on this part... using the same logic that is used to randomly load a particular div... but not getting things right with the timer...

    in case u can.. please help

  6. #6
    Join Date
    Oct 2006
    Location
    New York, NY, USA
    Posts
    262
    Thanks
    42
    Thanked 24 Times in 24 Posts

    Default 3 separate sets of random images

    I tried Peter Nguyen's code (including below version) and, for the life of me, could not get it to work. I'm missing some sort of comprehension here. Where do you specify image array? Could some kind soul clue me in?

    http://artdemo.tripod.com/indexRandom3.html
    <script language="javascript" type="text/javascript">/*EDITED VERSION*/
    /* Random Image Set by Peter Nguyen Dynamic Drive Forums User: tech_support Visit: www.dynamicdrive.com/forums This note must stay intact for legal use */
    var slide0 = new Array ();
    slide0[0] = "critters/rembrantGirlBroom.jpg";
    slide0[1] = "floral/cezanne.chrysanthemums.jpg";
    slide0[2] = "floral/vanGogh12sunflowers.jpg";
    slide0[3] = "floral/vanGoghSunflowers.jpg";
    slide0[4] = "scenes/vanGogh.gif";
    slide0[5] = "scenes/cole.jpg";

    var slide1 = new Array ();
    slide1[0] = "chanit/things/AnemonaesWC.jpg";
    slide1[1] = "chanit/things/floralApples.jpg";
    slide1[2] = "chanit/things/floralRecycle.jpg";
    slide1[3] = "chanit/things/floristDozen.jpg";
    slide1[4] = "chanit/things/moreAnemonaes.jpg";
    slide1[5] = "chanit/things/Neighbors.jpg";

    var slide2 = new Array ();
    slide2[0] = "critters/rembrantGirlBroom.jpg";
    slide2[1] = "floral/cezanne.chrysanthemums.jpg";
    slide2[2] = "floral/vanGogh12sunflowers.jpg";
    slide2[3] = "floral/vanGoghSunflowers.jpg";
    slide2[4] = "scenes/vanGogh.gif";
    slide2[5] = "scenes/cole.jpg";

    var slideSetId = new Array(); //Slide Set Array
    slideSetId[0] = "slide0" //Slide Set 0
    slideSetId[1] = "slide1" //Slide Set 1
    slideSetId[2] = "slide2"
    //Add more in the form of slideSet[number] = "your id here"

    var slides = 2 //How many slides there are

    function initSlideSet() {
    slides1 = slides+1
    slideSetCount = Math.floor(Math.random()*slides1)
    document.getElementById(slideSetId[slideSetCount]).style.display = 'block'
    }
    window.onload=initSlideSet
    </script>

  7. #7
    Join Date
    May 2006
    Location
    Sydney, Australia - Near the coast.
    Posts
    1,995
    Thanks
    0
    Thanked 8 Times in 7 Posts

    Default

    That was meant for random div's.

    Try this:

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Random Images</title>
    <script type="text/javascript">/*EDITED VERSION*/
    /*
    Random Image Set by Peter Nguyen (Version 2.0)
    Dynamic Drive Forums User: tech_support Visit: www.dynamicdrive.com/forums
    This note must stay intact for legal use */
    
    var maxImg = 3 //Maximum Number of Images for each Slide
    
    //Slide Set Images
    var slideSets = new Array();
    slideSets[0] = ["critters/rembrantGirlBroom.jpg","floral/cezanne.chrysanthemums.jpg","floral/vanGogh12sunflowers.jpg","floral/vanGoghSunflowers.jpg","scenes/vanGogh.gif","scenes/cole.jpg"];
    slideSets[1] = ["chanit/things/AnemonaesWC.jpg","chanit/things/floralApples.jpg","chanit/things/floralRecycle.jpg","chanit/things/floristDozen.jpg","chanit/things/moreAnemonaes.jpg","chanit/things/Neighbors.jpg"];
    slideSets[2] = ["critters/rembrantGirlBroom.jpg","floral/cezanne.chrysanthemums.jpg","floral/vanGogh12sunflowers.jpg","floral/vanGoghSunflowers.jpg","scenes/vanGogh.gif","scenes/cole.jpg"]
    
    //Add more in the form of slideSets[number] = [imagepaths]
    
    function initSlideSet() {
    
    	for (i=0; i < slideSets.length; i++)	{
    		var rand = Math.floor(Math.random() * slideSets[i].length)
    		alert(i)
    		for (r=0; r < maxImg; r++)	{
    			document.getElementById('slides').innerHTML += '<img src="' + slideSets[i][rand] + '" alt="Slide Set Image">'
    		}
    		
    	}
    }
    window.onload=initSlideSet
    </script>
    </head>
    
    <body>
    <div id="slides"></div>
    </body>
    </html>
    Last edited by tech_support; 02-22-2007 at 06:16 AM. Reason: Forgot to add HTML tags.
    Peter - alotofstuffhere[dot]com - Email Me - Donate via PayPal - Got spare hardware? Donate 'em to me :) Just send me a PM.
    Currently: enjoying the early holidays :)
    Read before posting: FAQ | What you CAN'T do with JavaScript | Form Rules | Thread Title Naming Guide

  8. #8
    Join Date
    Oct 2006
    Location
    New York, NY, USA
    Posts
    262
    Thanks
    42
    Thanked 24 Times in 24 Posts

    Default thank you Peter Nguyen

    Just now getting back to trying your second script. The var maxImg=3 produced 3-up of same image per slot so I changed it to maxImg=1 to get just one image per slot. Now I'm trying to style the display and maybe add other arguments [] per image e.g., caption and URL link. Therefore, I'm going to try for a format something like:

    var slideSets = new Array ();
    slideSets[0][0] = "critters/rembrantGirlBroom.jpg";
    slideSets[0][1] = "floral/cezanne.chrysanthemums.jpg";
    . . .
    slideSets[1][0] = "chanit/things/AnemonaesWC.jpg";
    slideSets[1][1] = "chanit/things/floralApples.jpg";
    . . .
    slideSets[2][0] = "critters/rembrantGirlBroom.jpg";
    slideSets[2][1] = "floral/cezanne.chrysanthemums.jpg";

    No doubt will need more help. (Still wish I could comprehend your first version using CSS.) I'll be back (either for help or to point to my results) but wanted to put in a quick "THANK YOU" before too much more time lapses.

  9. #9
    Join Date
    May 2006
    Location
    Sydney, Australia - Near the coast.
    Posts
    1,995
    Thanks
    0
    Thanked 8 Times in 7 Posts

    Default

    Quote Originally Posted by auntnini
    Still wish I could comprehend your first version using CSS.
    I don't know what you mean there.

    I've actually re-done the script using DOM. Here's the code and I hope you like it

    The script is really easy to follow

    The script takes the following layout:
    [Image Path,Caption]
    eg.
    Code:
      ["critters/rembrantGirlBroom.jpg","alttext"],
    Let me know if you have any problems.

    HTML Code:
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Random Images with Captions, IDs etc.</title>
    <script type="text/javascript">
    /*******************
    Random Image Sets by Peter Nguyen
    Dynamic Drive Forums User: tech_support
    
    This notice must stay intact for legal use
    ********************/
    
    //Slide Set Images
    var slideSets = new Array();
    slideSets[0] = [
      ["critters/rembrantGirlBroom.jpg","alttext"],
      ["floral/cezanne.chrysanthemums.jpg","alttext"],
      ["floral/vanGogh12sunflowers.jpg","alttext"],
      ["floral/vanGoghSunflowers.jpg","alttext"],
      ["scenes/vanGogh.gif","alttext"],
      ["scenes/cole.jpg","alttext"]
    ];
    slideSets[1] = [
    
      ["chanit/things/AnemonaesWC.jpg","alttext"],
      ["chanit/things/floralApples.jpg","alttext"],
      ["chanit/things/floralRecycle.jpg","alttext"],
      ["chanit/things/floristDozen.jpg","alttext"],
      ["chanit/things/moreAnemonaes.jpg","alttext"],
      ["chanit/things/Neighbors.jpg","alttext"]
    ];
    slideSets[2] = [
      ["critters/rembrantGirlBroom.jpg","alttext"],
      ["floral/cezanne.chrysanthemums.jpg","alttext"],
      ["floral/vanGogh12sunflowers.jpg","alttext"],
      ["floral/vanGoghSunflowers.jpg","alttext"],
      ["scenes/vanGogh.gif","alttext"],
      ["scenes/cole.jpg","alttext"]
    ];
    
    /* Generate a random number, do it again if the number has already been chosen */
    var oldr;
    function randomizer(maxnum)	{
    
    	//maxnum++
    	var r = Math.floor(Math.random() * maxnum)
    	if (r == oldr)	{
    		return randomizer(maxnum)
    	}
    	else	{
    		
    		oldr = r;
    		return r;
    	}
    }
    
    /*Display random image sets */
    function randomImgSets(arrayImgSetPaths,setsCount,divDisplay)	{
    
    	for (i=0; i < setsCount; i++)	{
    	
    		var r = randomizer(arrayImgSetPaths.length)
    		for (s=0; s < arrayImgSetPaths[r].length; s++)	{
    			var id = document.getElementById(divDisplay)
    			if (document.createElement)	{
    			
    				var e = document.createElement("img")
    				e.setAttribute("src", arrayImgSetPaths[r][s][0]+"?r="+r)
    				e.setAttribute("alt", arrayImgSetPaths[r][s][1])
    				e.setAttribute("id",  arrayImgSetPaths[r][s][2])
    				id.appendChild(e)
    			}
    			else	{
    				var content = '<img src="'+arrayImgSetPaths[r][s]+'" alt="Random Set Number: '+r+' Image Number: '+s+'"> <br>'
    				id.innerHTML += content;
    			}
    		}
    	}
    }
    window.onload = function() {
    
    	randomImgSets(slideSets, 1, "sliders")
    }
    </script>
    </head>
    
    <body>
    <div id="sliders"></div>
    </body>
    </html>
    Last edited by tech_support; 03-12-2007 at 06:12 AM.
    Peter - alotofstuffhere[dot]com - Email Me - Donate via PayPal - Got spare hardware? Donate 'em to me :) Just send me a PM.
    Currently: enjoying the early holidays :)
    Read before posting: FAQ | What you CAN'T do with JavaScript | Form Rules | Thread Title Naming Guide

  10. #10
    Join Date
    Oct 2006
    Location
    New York, NY, USA
    Posts
    262
    Thanks
    42
    Thanked 24 Times in 24 Posts

    Default Thanks again

    Still struggling with this, but wanted to thank you again for your continued wonderful input.

    In my 3/05/07 response using slideSets[0][0]="___", was thinking of a favorite script http://www.wsabstract.com/script/scr...ultishow.shtml for “Multi Slideshows,” used at http://chanit.com/people/index.htm. That proved too complex. Then, seeing your kind 3/06/07 entry using [double [square brackets]], my error was evident.

    But just cannot get it to behave as wished. The image sets are 6-up (not 3) so tried defining a var maxnum= in all sorts of ways and fiddling with other things, but could not comprehend what +”?r=”+r did in
    var e = document.createElement("img")
    e.setAttribute("src", arrayImgSetPaths[r][s][0]+"?r="+r)

    Also could not: (1) get the captions (“altText”) to show up, (2) add a link, (3) or position the images inside my “picbox” div (which would resize them, hold images and captions together, etc.). See my attempts with your 3/05/07 script at http://artdemo.tripod.com/randomDD3.html.

    Returning to your previous 2/22/07 entry, got the images into “picbox” divs by using
    for (r=0; r < maxImg; r++) {
    document.getElementById('slides').innerHTML +=
    '<div class="picbox"><img src="' + slideSets[i][rand] + '"
    alt="Slide Set Image">&nbsp;</div>' }
    as can be viewed at http://artdemo.tripod.com/random3DD.html.

    By studying both of your scripts, hope to get my act together: 3 sets/slots of random images with a heading for each slot (e.g., Paintings, Prints, Illustrations) and a caption and link for each random image). The prospective client who got me on this bumpy road (for http://artdemo.tripod.com/index.html) is long gone, but the concept has become a tantalizing effort that I’m still struggling with.

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
  •