Random image rotator script

[Tomohawks]

Hi,

I am looking for a script that will rotate images on my homepage every time the browser is refreshed.
I did find a script on this site which randomizes my images vertically but not both vertically and horizontally which I need. The link below is an example of what I am looking for.

http://www.pitlochrybedandbreakfast.co.uk/

Can anyone please point me in the right direction?

Thanks,

Tom

[Beverleyh]

I dont know of a pre-written script that randomly loads a whole gallery (4x4 thumbs, of whatever), put its quite simple to mash something together using a little cunning and manipulation.

First, here's a php snippet that loads lines randomly from a text file - save on your web page where you want the gallery/random content to appear;

<?php
$random_content="path/to/random_content.txt";
$display=rand(0, sizeof($random_content)-1);
echo $random_content[$display];
?>

And in random_content.txt, you'd have the content that loads randomly (a new piece of content per line). This could be anything. It could be lines of text;

<p>This is a random line of text.</p>
<p>Refresh the page to see me change.</p>
<p>One, two, buckle my shoe.</p>
<p>Are you getting dizzy yet?</p>

It could be images;

<img src="pic-1.jpg" height="100px" width="200px" alt="Random">
<img src="pic-2.jpg" height="100px" width="200px" alt="Random">
<img src="pic-3.jpg" height="100px" width="200px" alt="Random">
<img src="pic-4.jpg" height="100px" width="200px" alt="Random">

Or even links to different javascripts;

<script type="text/javascript" src="path/to/js/gallery1.js"></script>
<script type="text/javascript" src="path/to/js/gallery2.js"></script>
<script type="text/javascript" src="path/to/js/gallery3.js"></script>
<script type="text/javascript" src="path/to/js/gallery4.js"></script>

As long as each bit of new data falls on a news line in the text file, it will work.

You can also use php includes in the random_content.txt file to insert bigger blocks of HTML, etc;

<?php include('path/to/gallery_1.html');?>
<?php include('path/to/gallery_2.html');?>
<?php include('path/to/gallery_3.html');?>
<?php include('path/to/gallery_4.html');?>

Now in all of the gallery_?.html files that are used as includes you could manually code a grid of images in HTML (different in each one).

Its probably not the sleekest approach but its a simple solution to your problem and a method that can be used for lots of random loading things.

I hope it helps.

[Saz]

I dont know of a pre-written script that randomly loads a whole gallery (4x4 thumbs, of whatever), put its quite simple to mash something together using a little cunning and manipulation.

First, here's a php snippet that loads lines randomly from a text file - save on your web page where you want the gallery/random content to appear;

<?php
$random_content="path/to/random_content.txt";
$display=rand(0, sizeof($random_content)-1);
echo $random_content[$display];
?>

And in random_content.txt, you'd have the content that loads randomly (a new piece of content per line). This could be anything. It could be lines of text;

<p>This is a random line of text.</p>
<p>Refresh the page to see me change.</p>
<p>One, two, buckle my shoe.</p>
<p>Are you getting dizzy yet?</p>

It could be images;

<img src="pic-1.jpg" height="100px" width="200px" alt="Random">
<img src="pic-2.jpg" height="100px" width="200px" alt="Random">
<img src="pic-3.jpg" height="100px" width="200px" alt="Random">
<img src="pic-4.jpg" height="100px" width="200px" alt="Random">

Or even links to different javascripts;

<script type="text/javascript" src="path/to/js/gallery1.js"></script>
<script type="text/javascript" src="path/to/js/gallery2.js"></script>
<script type="text/javascript" src="path/to/js/gallery3.js"></script>
<script type="text/javascript" src="path/to/js/gallery4.js"></script>

As long as each bit of new data falls on a news line in the text file, it will work.

You can also use php includes in the random_content.txt file to insert bigger blocks of HTML, etc;

<?php include('path/to/gallery_1.html');?>
<?php include('path/to/gallery_2.html');?>
<?php include('path/to/gallery_3.html');?>
<?php include('path/to/gallery_4.html');?>

Now in all of the gallery_?.html files that are used as includes you could manually code a grid of images in HTML (different in each one).

Its probably not the sleekest approach but its a simple solution to your problem and a method that can be used for lots of random loading things.

I hope it helps.

This is very interesting, is there a way to adapt this somehow, so that one php include file was loaded and then on refresh or new page load, another php include file was included ?

[Beverleyh]

Thats already covered here:

You can also use php includes in the random_content.txt file to insert bigger blocks of HTML, etc;

PHP Code:

<?php include('path/to/gallery_1.html');?> 
<?php include('path/to/gallery_2.html');?> 
<?php include('path/to/gallery_3.html');?> 
<?php include('path/to/gallery_4.html');?>

[vwphillips]

<!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>
<div id="tst" ></div>
<img  class="random" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" alt="img" width="200" height="150" />
<img  class="random" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" alt="img" width="200" height="150" />
<img  class="random" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" alt="img" width="200" height="150" />
<img  class="random" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" alt="img" width="200" height="150" />
<img  class="random" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" alt="img" width="200" height="150" />

<script type="text/javascript">
/*<![CDATA[*/

function Random(cls,ary){
 var imgs=zxcByClassName(cls,document,'IMG'),z0=0;
 ary.shuffle();
 for (;z0<imgs.length;z0++){
  if (ary[z0]){
   imgs[z0].src=ary[z0];
  }
 }
}


function zxcByClassName(nme,el,tag){
 if (typeof(el)=='string') el=document.getElementById(el);
 el=el||document;
 for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
  if(reg.test(els[z0].className)) ary.push(els[z0]);
 }
 return ary;
}

Array.prototype.shuffle=function(){
 for (var r,t,z0=0;z0<this.length;z0++){
  r=Math.floor(Math.random()*this.length);
  t=this[z0];
  this[z0]=this[r];
  this[r]=t;
 }
}

Random('random',['http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg','http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg','http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg','http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg'])
/*]]>*/
</script>

</body>

</html>

[Saz]

Thanks Vic and Beverley, it's appreciated. I can see now, that more info might be needed, sorry for not including this initially, but wasn't sure it was needed. I will make a donation if this can be worked out

There's a php include which is a side banner that is used on all of the pages on the site.

There's two other relevant php files with all the relevant usual html (src, href, title, target frame, alts etc) for 10 images within each php file - we'll call them image_folder_one and image_folder_two

The aim, is for every time that the user refreshes or goes to another page on the same site, that one set of images shows from one folder, but in a randomised way, then if the user refreshes or goes to another page on the same site, another set of images from the other folder are shown in a randomised way, and so on, and so on.

The images change every week, so would need to be a quick and very simple way of changing them.

The helps appreciated.

Saz

[swank]

Hi,

I would like to ask if say I like to rotate banner orderly per page refresh, is there a way to do it? Currently all the codes I found online does math.random that randomly displays pictures per page refresh.

Say I got 3 pictures that I want to rotate evenly each page refresh instead of randomly rotating, what should I change math.random to?

Hope to find an answer soon, thank you all!

[vwphillips]

<!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>
<img id="tst" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" alt="img" width="200" height="150" />

<script type="text/javascript">
/*<![CDATA[*/
var SRCArray=[
 ['http://www.vicsjavascripts.org.uk/StdImages/One.gif'],
 ['http://www.vicsjavascripts.org.uk/StdImages/Two.gif'],
 ['http://www.vicsjavascripts.org.uk/StdImages/Three.gif'],
 ['http://www.vicsjavascripts.org.uk/StdImages/Four.gif'],
 ['http://www.vicsjavascripts.org.uk/StdImages/Five.gif']
]

var days=1;  // days persistance

function cookie(nme){
  var re=new RegExp(nme+'[^;]+','i');
  if (document.cookie.match(re)){
   return document.cookie.match(re)[0].split("=")[1];
  }
  return null
 }

var nu=cookie('tst')||0;
document.getElementById('tst').src=SRCArray[nu];
nu=++nu%SRCArray.length
document.cookie='tst='+nu+';expires='+(new Date(new Date().getTime()+days*86400000).toGMTString())+';path=/';

/*]]>*/
</script>

</body>

</html>

[swank]

Hi vwphillips,

Thank you for the quick reply, would like to ask one of the top codes:

<img id="tst" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" alt="img" width="200" height="150" />

Is this necessary? And what do I replace it with? Thanks!

[swank]

Oh and I need it such that the banners are clickable that links to a different page per banner. How do I add the <a> tag for each banner? Thank you so much!