Randomize Text and Image Crawler?

[mirdreams]

1) Script Title: Text and Image Crawler

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...wler/index.htm

3) Describe problem: I would like to know if there is a way to randomize which image shows up first.

[jscheuer1]

Use this modified version of the crawler.js file named here as crawler_rand.js (right click and choose 'save as'):

Attachment 3153

Change this on your page as highlighted:

<script type="text/javascript" src="crawler_rand.js">
/*
Text and/or Image Crawler Script ©2009-2010 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/ username: jscheuer1
This Notice Must Remain for Legal Use
updated: 02/16/2010 for random image order option
*/
</script>

Then you may add to your on page init, for example (highlighted):

<script type="text/javascript">
marqueeInit({
 random: true,
 uniqueid: 'art',
 direction: 'right',
 style: { //style object for this marquee container (use quotes on both sides of the : as shown)
	'width': '60%',
	'height': '235px',
	'background-color': '#ddd',
	'border': '1px solid #111',
	'margin': '2ex auto 0 auto'},
 inc: 6, //speed - pixel increment for each iteration of this marquee's movement
 moveatleast: 4,
 mouse: 'cursor driven' //mouseover behavior ('pause' 'cursor driven' or false)
});
</script>

[mirdreams]

Thank you John. This definitely randomizes the images. But it also seems to randomize which hyperlink is assigned to which image. Is there anyway to keep the images with their hyper links? Perhaps wrap them in a <div> or something like that?

[jscheuer1]

You said images. No matter. We can make the tag the option, use this version:

Attachment 3155

Change this on your page as highlighted (from the last changes):

<script type="text/javascript" src="crawler_rand_2.js">
/*
Text and/or Image Crawler Script ©2009-2010 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/ username: jscheuer1
This Notice Must Remain for Legal Use
updated: 02/18/2010 for random tag order option
*/
</script>

Then you may add to your on page init, for example (highlighted):

<script type="text/javascript">
marqueeInit({
 random: 'a',
 uniqueid: 'art',
 direction: 'right',
 style: { //style object for this marquee container (use quotes on both sides of the : as shown)
	'width': '60%',
	'height': '235px',
	'background-color': '#ddd',
	'border': '1px solid #111',
	'margin': '2ex auto 0 auto'},
 inc: 6, //speed - pixel increment for each iteration of this marquee's movement
 moveatleast: 4,
 mouse: 'cursor driven' //mouseover behavior ('pause' 'cursor driven' or false)
});
</script>

That tells it to use the 'a' tags. Since the images are inside those tags, they will be randomized right along with them and retain their relationship to them. It assumes that all of the images are linked. If there were no links, one could specify 'img'. Divisions shouldn't be used in the crawler because they will introduce line breaks. But if you were to have a mixture of linked and non-linked images, one could use span tags, ex:

<span><a href="../files/photo1.jpg"><img src="../files/photo1.jpg" alt=""></a></span> 
<span><img src="../files/photo2.jpg" alt=""></span>

and in the init:

marqueeInit({
 random: 'span',
 unique . . .

[mirdreams]

Brilliant. Thank you very much. I do have a mix of images with and without links so the span option is perfect. Thank you again.