rotating images (no link)

**ksk226** · 06-09-2010, 07:27 PM

This is my code below. I LOVE everything about it, border and all.

However, this only randomly changes when I reload the page.

Is there a way I can make it so that the images keep rotating when I'm on the page instead of it randomly changing everytime I reload?

I would like to keep the border and size and all.

I REALLY NEED HELP!!!! THANK YOU SO MUCH IN ADVANCE!

<script type="text/javascript">
/*********Edit values here for your pictures*******************/
var
pic1='https://store-a32dc.mybigcommerce.com/product_images/uploaded_images/MOMSHOPPING2.gif',
pic2='https://store-a32dc.mybigcommerce.com/product_images/uploaded_images/RRR.gif',
pic3='https://store-a32dc.mybigcommerce.com/product_images/uploaded_images/2photos.jpg';
/***************End of Edit*********************************/

var rangPics=[pic1,pic2,pic3]; // Add all the picture variables in this array.
window.onload=function() { rangRandom=Math.floor(Math.random()*rangPics.length);
document.getElementById('show').innerHTML='<img src="'+rangPics[rangRandom]+'" alt="myimage" style="width:950px;height:450px;">';}</script>
<div id="show" style="text-align:center;width:950px;border:3px double #222;padding:10px;"></div>

**djr33** · 06-09-2010, 07:33 PM

This code is very simple: it isn't designed to do that. There are, however, other scripts available (search the DD library) that will do this. Look for a simple image slideshow that allows random order.
You could try to add extra code to the current example: basically create an infinite loop with a 5 second pause that executes the same code as the onload function above. But it's probably easier to just use an existing script rather than writing that.

**ksk226** · 06-09-2010, 08:02 PM

Is there a way I can add extra code to the current example?

Would appreciate if someone can give it to me, even the code up there, I found online.

I know nothing about coding I'm gonna keep searching though but would love some help.

**djr33** · 06-09-2010, 08:52 PM

As I said, it will be easier to find a new script that does what you want and use the same images in it. Adjusting this is possible, but it would require a strong understanding of the code and what needs to be done to change it.
http://dynamicdrive.com/dynamicindex14/index.html
That's a good place to start.

**ksk226** · 06-10-2010, 04:02 AM

hey djr33! thanks so much! i was getting frustrated and that is probably why nothing seemed like it was working.

i went ahead and figured out a code, but need slight help cuz i want to add a border.

anyway!!! thanks so much!!!!

**djr33** · 06-10-2010, 04:32 AM

A border can probably be applied to an element surrounding the images: a div, in most cases. But if you need help with that, post a link to the page.

**vwphillips** · 06-10-2010, 08:46 AM

modifying the original

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" xml:lang="en" lang="en">

<head>
  <title></title>
</head>

<body>
<script type="text/javascript">
/*********Edit values here for your pictures*******************/
var
pic1='https://store-a32dc.mybigcommerce.com/product_images/uploaded_images/MOMSHOPPING2.gif',
pic2='https://store-a32dc.mybigcommerce.com/product_images/uploaded_images/RRR.gif',
pic3='https://store-a32dc.mybigcommerce.com/product_images/uploaded_images/2photos.jpg';
/***************End of Edit*********************************/

var rangPics=[pic1,pic2,pic3]; // Add all the picture variables in this array.

window.onload=Test;

function Test() {
 rangRandom=Math.floor(Math.random()*rangPics.length);
 if (this.nu==rangRandom){
  setTimeout('Test()',20);
  return;
 }
 document.getElementById('show').innerHTML='<img src="'+rangPics[rangRandom]+'" alt="myimage" style="width:950px;height:450px;">';
 setTimeout('Test()',2000);
 this.nu=rangRandom;
}

</script>
<div id="show" style="text-align:center;width:950px;border:3px double #222;padding:10px;"></div>
</body>

</html>

**djr33** · 06-10-2010, 08:51 AM

That's a good solution.

One note: that will not preload the images, so when they cycle the first time it will have to load them and if they are slow (slow server, slow user connection, big files, or other reason), then this will be disruptive. A full slideshow script could include this also.
But in this case it may be best to keep this: usually simpler is better.

Thread: rotating images (no link)

Thread Tools

Search Thread

rotating images (no link)

Bookmarks

Bookmarks

Posting Permissions