Random image rotator - with a timer [Archive]

View Full Version : Random image rotator - with a timer

zenweezil

10-17-2005, 09:58 PM

I am using this code to pull a random image from my server and display it - but I would like to also add some sort of time interval so it will pull up another photo every x seconds. Any ideas how to do that without refreshing the page?

Here is the current code if that helps:
<%
dim x(1000)

'The directory of all my pictures...
Const mypath="/images/common/photogallery"

Set filesystem = CreateObject("Scripting.FileSystemObject")
Set folder = filesystem.GetFolder(server.mappath(mypath))

Set filecollection = folder.Files

'Step through the files list, keeping track of
'the number of files....
idx=0
For Each file in filecollection
idx=idx+1
x(idx)=file.name
Next

'Choose a random picture
randomize timer
whichNo=int(rnd()*idx)+1

'Clean up...
set filesystem=nothing
set folder=nothing
set filecollection=nothing

'Display the image!
response.write "<img height=96 width=170 src=" & mypath & "/"
response.write x(whichNO)& " border=0>"
%>

crashed29

10-18-2005, 01:06 AM

I used this on a site and it worked great except for Safari browsers.

copy all the way down

/*----------------------------------------------------
||Banner Ad Rotater v1.01 ||
|| ||
||Script by: ||
||Anarchos ||
||URL: http://www.xs.mw/anarchos ||
||E-mail: anarchos3@hotmail.com ||
||ICQ: 12007422 ||
|| ||
||E-mail or ICQ me if you have any questions or need ||
||help setting up your banner ad rotator. Check out ||
||my webpage every once in a while for updates to ||
||this script. ||
-----------------------------------------------------*/

//Setup Instructions:
//-0) Modify this file then copy and paste it into the <head> of the webpage to use the banner ad script

/*---------------------------
1) add into your <head>:

<script language="javascript" src="bannerscript.js"></script>

<style>

</style>

-----------------------------*/

/*----------------------------
2) add this code into your webpage where you want the banner ad to be displayed:


<div id="bannerAd">
<script language="JavaScript">

</script>
</div>


-----------------------------*/

//-3) time between switching the ad, in milliseconds -\\
var refreshTime = 5000; //- 5000 ms = 5 seconds -\\

//-4) number of ads to rotate -\\
var numAds = 4;

function makeAd() {
this.width = ''
this.height = ''
this.src = ''
this.href = ''
this.mouseover = ''
this.sponsor = ''
}

var ads = new Array()
for(var i = 1; i <= numAds; i++) { ads[i] = new makeAd() }

//- 5) Copy and paste the lines between the banner definition for
//each banner you want to rotate and be sure to change numAds to
//the number of banners (look about 15 lines up for numAds)
i = 1;

ads[i].width = "524" //width of image
ads[i].height = "272" //height of image
ads[i].src = "mm_home_big.jpg" //image url
ads[i].href = "/octa/measurem/survey.asp" //link url
ads[i].mouseover = "Measure M Survey" //text to display when mouse moves over banner
ads[i].sponsor = "Sponsor"
i++

ads[i].width = "524" //width of image
ads[i].height = "272" //height of image
ads[i].src = "070805_2.jpg" //image url
ads[i].href = "/extreme/intro.asp" //link url
ads[i].mouseover = "Extreme Traffic Makeover Survey" //text to display when mouse moves over banner
ads[i].sponsor = "Sponsor"
i++

ads[i].width = "524" //width of image
ads[i].height = "272" //height of image
ads[i].src = "070805_3.jpg" //image url
ads[i].href = "/busrail/deals/intro.asp" //link url
ads[i].mouseover = "Destination Deals"
ads[i].sponsor = "Sponsor" //text to display when mouse moves over banner
i++

ads[i].width = "524" //width of image
ads[i].height = "272" //height of image
ads[i].src = "070805_4.jpg" //image url
ads[i].href = "/news/late/071105.asp" //link url
ads[i].mouseover = "Number 1 Transportation System" //text to display when mouse moves over banner
ads[i].sponsor = "Sponsor"
i++

var myCode = '';
do {
var n= Math.floor(Math.random() * (numAds + 1) + 1);
} while(n > numAds);
var current_ad = n;
myCode = getCode(n);

function getCode(adNumber){
var tempCode = ""
tempCode += ('<a href="'+ ads[adNumber].href +'" \n')
tempCode += ('onMouseOver="status=\''+ ads[adNumber].mouseover +'\';return true" \n')
tempCode += ('onMouseOut="status=\'\'"> \n')
tempCode += ('<img src="' + ads[adNumber].src + '" width=' + ads[adNumber].width)
tempCode += (' onLoad="setTimeout(\'newAd();\',' + refreshTime + ');"')
tempCode += ('\n height=' + ads[adNumber].height + ' border=0 >')
tempCode += ('</a>')
return tempCode;
}

function newAd(){
current_ad++;
if (current_ad > numAds)
current_ad = 1;
if (document.all){
write(getCode(current_ad));
}
}

function write(text){
if (document.layers) {
document.bannerAd.document.write(text)
document.bannerAd.document.close();
}
else
if (document.all)
document.all.bannerAd.innerHTML = text

}

zenweezil

10-18-2005, 02:10 PM

Thanks, but this requires listing the images - I really want the script to randomly pull from a file folder of over 1000 photos.

Maybe I can find a way to merge the two codes into one - I will give it a try.

Stephen

zenweezil

12-12-2005, 04:22 PM

Anyone else have any ideas how I can have a new image be displayed every x seconds without refreshing the page?

TheShaner

12-12-2005, 04:31 PM

This problem is for JavaScript. You need client-side code in order to do this without loading the page, since ASP needs to be processed by the server, and thus needs the page to be loaded.

There are plenty of JavaScript scripts out there for your need. Just post in the JavaScript forums or check out places like DynamicDrive.com and HotScripts.com

-Shane

zenweezil

12-12-2005, 04:51 PM

Thanks - I was so focused on using ASp - but it does make sense that it would have to be client-side to prevent reloading.

hinch

12-12-2005, 04:54 PM

create an array in ASP of the filenames ie

"file1.gif,file2.jpg"

etc pass it to a javascript random image selector that displays a random image every xx seconds dependant on an array of file names for input.

i've done exactly this once before but i cant for the life of me remember where it was that i did it or the url to go rip the code out

Corinthian

01-07-2006, 07:00 AM

This is exactly what I've been trying to accomplish this evening... A script that reads the contents of an image directory into an array and feeds them into random rotation.

ZenWeezil did you get this working or Hinch did you find that code?

Thanks!

glenngv

01-09-2006, 02:12 AM

<html>
<head>
<script type="text/javascript">
var arrFiles = new Array();
<%
dim idx, filesystem, folder, filecollection
dim x(1000)

'The directory of all my pictures...
Const mypath="/images/common/photogallery"

Set filesystem = CreateObject("Scripting.FileSystemObject")
Set folder = filesystem.GetFolder(server.mappath(mypath))
Set filecollection = folder.Files

'generate javascript filenames array
idx = 0
For Each file in filecollection
response.write "arrFiles[" + idx "] = """ & file.name & """;" & vbcrlf
idx = idx+1
Next

'Clean up...
set filesystem=nothing
set folder=nothing
set filecollection=nothing
%>

var path = "<%=mypath%>/";
var interval = 5000; //5 seconds

function rotateBanner(){
var randIndex = Math.floor(Math.random()*arrFiles.length);
document.getElementById("banner").src = path + arrFiles[randIndex];
setTimeout(rotateBanner, interval);
}

window.onload = rotateBanner;
</script>
</head>
<body>
<img id="banner" height="96" width="170" src="dummy.gif" alt="" />
</body>
</html>