Javascript –– randomly cycle through images
written by: admin
written by: admin
Date Written: 11/28/09 Last Updated: 1/15/10
I got a lot of help with this script from the kind people at www.dynamicdrive.com/forums
This script will cycle through images at the click of a button without refreshing the page. I really only have one use for it on my site and that is for the memoblog page. When I create a new memo a random image is generated, but I almost want a different image, so I would refresh the page till I got an image I was happy with. With this script I won't have to worry about losing the other information I have typed in.
Below is a working example:
<?php
$imgdir = 'images/screenshots';
$allowed_types = array('png','jpg','peg','gif','bmp');
$dimg = opendir($imgdir);
while($imgfile = readdir($dimg))
{
if(in_array(strtolower(substr($imgfile,-3)),$allowed_types))
{
$Stats[]="'$imgfile'";
shuffle($Stats);
$num=count($Stats);$num=$num-1;
$Statss=implode(",",$Stats);
}
}
?>
<div>
<img id="img" src="" style="width:135px; height:135px;" alt="">
</div>
<div>
<br><br><button onclick="newi();return false;">different image</button>
</div>
<form name="myform">
<div><input type="text" name="outputtext"></div>
</form>
<script type="text/javascript">
function newi(){++newi.Num;
if(newi.Num > newi.ar.length - 1){
newi.Num = 0;
newi.img.src = 'images/screenshots/' + newi.ar[newi.Num];
}
else{
newi.img.src = 'images/screenshots/' + newi.ar[newi.Num];
}
newi.output.value = newi.ar[newi.Num];
}
newi.Num = 0;
newi.ar = new Array(<?php echo "$Statss"; ?>);
newi.img = document.getElementById('img');
newi.output = document.forms.myform.elements.outputtext;
newi();
</script>
$imgdir = 'images/screenshots';
$allowed_types = array('png','jpg','peg','gif','bmp');
$dimg = opendir($imgdir);
while($imgfile = readdir($dimg))
{
if(in_array(strtolower(substr($imgfile,-3)),$allowed_types))
{
$Stats[]="'$imgfile'";
shuffle($Stats);
$num=count($Stats);$num=$num-1;
$Statss=implode(",",$Stats);
}
}
?>
<div>
<img id="img" src="" style="width:135px; height:135px;" alt="">
</div>
<div>
<br><br><button onclick="newi();return false;">different image</button>
</div>
<form name="myform">
<div><input type="text" name="outputtext"></div>
</form>
<script type="text/javascript">
function newi(){++newi.Num;
if(newi.Num > newi.ar.length - 1){
newi.Num = 0;
newi.img.src = 'images/screenshots/' + newi.ar[newi.Num];
}
else{
newi.img.src = 'images/screenshots/' + newi.ar[newi.Num];
}
newi.output.value = newi.ar[newi.Num];
}
newi.Num = 0;
newi.ar = new Array(<?php echo "$Statss"; ?>);
newi.img = document.getElementById('img');
newi.output = document.forms.myform.elements.outputtext;
newi();
</script>
It has been tweaked slightly to center it and the images were not randomized.
multiple buttons
In this example you have greater control over the cycling of images with a forward, back, and original image buttons.
<div style="padding-right:15px;"><img id="imgo" src="" style="width:135px; height:135px;" class='floatimgleft' alt=""><button onclick="return newio(-1);return false;">prev</button>
<button onclick="return newio();return false;">original image</button>
<button onclick="return newio(1);return false;">next</button></div>
<form name="myformo"><input type="text" name="outp">
</form>
<script type="text/javascript">
function newio(n){
newio.Num += n || -newio.Num;
newio.Num = newio.Num < 0? newio.count - 1 : newio.Num % newio.count;
newio.imgo.src = '/images/screenshots/' + newio.ar[newio.Num];
newio.output.value = newio.ar[newio.Num];
return false;
}
newio.Num = 0;
newio.ar = new Array('gunslingergirl30.jpg', 'gunslingergirl34.jpg', 'gits25.jpg', 'gunslingergirl5.jpg', 'iria4.jpg', 'noir113.jpg', 'noir17.jpg', 'gunslingergirl3.jpg', 'elfenlied4.jpg','elfenlied2.jpg', 'dragonhalf12.jpg', 'blood2.jpg', 'cowboybebop32.JPG', 'battleangel1.jpg');
newio.count = newio.ar.length;
newio.imgo = document.getElementById('imgo');
newio.output = document.forms.myformo.elements.outp;
newio();
</script>
<button onclick="return newio();return false;">original image</button>
<button onclick="return newio(1);return false;">next</button></div>
<form name="myformo"><input type="text" name="outp">
</form>
<script type="text/javascript">
function newio(n){
newio.Num += n || -newio.Num;
newio.Num = newio.Num < 0? newio.count - 1 : newio.Num % newio.count;
newio.imgo.src = '/images/screenshots/' + newio.ar[newio.Num];
newio.output.value = newio.ar[newio.Num];
return false;
}
newio.Num = 0;
newio.ar = new Array('gunslingergirl30.jpg', 'gunslingergirl34.jpg', 'gits25.jpg', 'gunslingergirl5.jpg', 'iria4.jpg', 'noir113.jpg', 'noir17.jpg', 'gunslingergirl3.jpg', 'elfenlied4.jpg','elfenlied2.jpg', 'dragonhalf12.jpg', 'blood2.jpg', 'cowboybebop32.JPG', 'battleangel1.jpg');
newio.count = newio.ar.length;
newio.imgo = document.getElementById('imgo');
newio.output = document.forms.myformo.elements.outp;
newio();
</script>
TAGS: javascript, images