[RESOLVED] Random/rotate Script

**marenne** · 02-03-2010, 09:18 AM

Hi Everyone,

I have a page with multiple div's.
I'm searching for a script that will make them randomly switch places at refresh.
So I want ALL of them to load, but at different places each time. (it would be perfect if none of them showed twice)

I've been searching, but so far I can only find scripts that show one image out of several.

There must be a way to do this!? Can anyone help?

**JMRKER** · 02-03-2010, 10:51 AM

Have you started any JS or HTML attempt as to what the layout and contents (image files) are to look like?

**marenne** · 02-03-2010, 11:03 AM

I tried some different js scripts but removed them again.

The layout is fairly simple, just some 95x95px divs with borders, and text or image content, some css with image hovers. The divs are linked to open greybox, and are not positioned.

That's all.

html:
<div class="afb1"><a href="afb1.html" rel="gb_page_center[506, 506]"> </a></div>
<div class="afb2"><a href="afb2.html" rel="gb_page_center[506, 506]"> </a></div>

css.
.afb1 a {
height: 95px;
width: 95px;
border: 2px solid #5C97C9;
margin: 3px;
background-image: url(afb1a.jpg);
}
.afb1 a:hover {
height: 95px;
width: 95px;
border: 2px solid #5C97C9;
margin: 3px;
background-image: url(afb1b.jpg);

**JMRKER** · 02-03-2010, 02:11 PM

Well, you didn't give much information to work with
(image links, number of images, image URLs, etc),
nor the image display sample, so here's a simplified attempt.

Code:

<html>
<head>
<title>Random Image Positions</title>
<script type="text/javascript">
// Modified for: http://www.webdeveloper.com/forum/showthread.php?p=1065400#post1065400

var imageList = [
  'http://www.nova.edu/hpd/otm/pics/4fun/11.jpg|URL11.html',
  'http://www.nova.edu/hpd/otm/pics/4fun/12.jpg|URL12.html',
  'http://www.nova.edu/hpd/otm/pics/4fun/13.jpg|URL13.html',
  'http://www.nova.edu/hpd/otm/pics/4fun/14.jpg|URL14.html',
  'http://www.nova.edu/hpd/otm/pics/4fun/15.jpg|URL15.html',
  'http://www.nova.edu/hpd/otm/pics/4fun/21.jpg|URL21.html',
  'http://www.nova.edu/hpd/otm/pics/4fun/22.jpg|URL22.html',
  'http://www.nova.edu/hpd/otm/pics/4fun/23.jpg|URL23.html',
  'http://www.nova.edu/hpd/otm/pics/4fun/24.jpg|URL24.html',
  'http://www.nova.edu/hpd/otm/pics/4fun/25.jpg|URL25.html',
  'http://www.nova.edu/hpd/otm/pics/4fun/31.jpg|URL31.html',
  'http://www.nova.edu/hpd/otm/pics/4fun/32.jpg|URL32.html',
  'http://www.nova.edu/hpd/otm/pics/4fun/33.jpg|URL33.html',
  'http://www.nova.edu/hpd/otm/pics/4fun/34.jpg|URL34.html',
  'http://www.nova.edu/hpd/otm/pics/4fun/35.jpg|URL35.html',
  'http://www.nova.edu/hpd/otm/pics/4fun/41.jpg|URL41.html',
  'http://www.nova.edu/hpd/otm/pics/4fun/42.jpg|URL42.html',
  'http://www.nova.edu/hpd/otm/pics/4fun/43.jpg|URL43.html',
  'http://www.nova.edu/hpd/otm/pics/4fun/44.jpg|URL44.html',
  'http://www.nova.edu/hpd/otm/pics/4fun/45.jpg|URL45.html'  // Note: no comma after last entry
];

function randOrd() {
  return (Math.round(Math.random())-0.5);
}
function InitializeImageLinks() {
  var tarr = [];
  var str = '';
  var wcnt = 0;

// randomize imageList contents
  var imgArr = imageList.sort(randOrd);

  for (var i=0; i<imgArr.length; i++) {
    tarr = imgArr[i].split('|');
    str += '<div class="imgInfo">';
    str += '<a href="'+tarr[1]+'">';
    str += '<img src="'+tarr[0]+'" height="100" width="100">';
    str += '</a>';
    str += '</div>';
    wcnt++;  if ((wcnt &#37; 4) == 0) { str += '<br>'; }
  }
  return str;
}

</script>

<style type="text/css">
#greybox {
  position:fixed;	top:50px; 	left:100px;
  height:546px; 	width:506px;
  text-align:center;  	vertical-align:middle;
}
.imgInfo {
  height:95px;  width:95px;
  border: 2px solid #5C97C9;
  margin: 3px;
  display:inline;
}
</style>

</head>
<body>
<div id="greybox">
<script type="text/javascript">
  document.write(InitializeImageLinks());
</script>
</div>
</body>
</html>

Substitute your image locations and URL references in the imageList array.

How close did I come?

**marenne** · 02-03-2010, 05:40 PM

This is perfect, thank you!

Especially because the amount of div's isn't limited.
I modified it a bit so that the assigned classes can be individual too (because of the hovers), and greybox will be used.

Testpage here: http://0797738.student.wdka.nl/

Code:

<html>
<head>
<title>Random Image Positions</title>

<!--links to css and greybox scripts-->

<script type="text/javascript">
// Modified for: http://www.webdeveloper.com/forum/showthread.php?p=1065457#post1065457

var imageList = [
  'afb1.html|afb1',
  'afb2.html|afb2',
  'afb3.html|afb3',
  'afb4.html|afb4',
  'afb5.html|afb5',
  'afb6.html|afb6',
  'afb7.html|afb7',
  'afb8.html|afb8',
  'afb9.html|afb9',
  'afb10.html|afb10',
  'afb11.html|afb11',
  'afb12.html|afb12',
  'afb13.html|afb13'  // Note: no comma after last entry
];

function randOrd() {
  return (Math.round(Math.random())-0.5);
}
function InitializeImageLinks() {
  var tarr = [];
  var str = '';
  var wcnt = 0;

// randomize imageList contents
  var imgArr = imageList.sort(randOrd);

  for (var i=0; i<imgArr.length; i++) {
    tarr = imgArr[i].split('|');
    str += '<div class="'+tarr[1]+'">';
    str += '<a href="'+tarr[0]+'" ';
    str += 'rel="gb_page_center[506, 506]">';
    str += ' ';
    str += '</a>';
    str += '</div>';
  }
  return str;
}

</script>

</head>
<body>

<script type="text/javascript">
  document.write(InitializeImageLinks());
</script>

</body>
</html>

Code:

.afb1 a {
height: 95px;
width: 95px;
border: 2px solid #5C97C9;
margin: 3px;
background-image: url(afb1a.jpg);
}
.afb1 a:hover {
height: 95px;
width: 95px;
border: 2px solid #FFFFFF;
margin: 3px;
background-image: url(afb1b.jpg);