How do you have a picture change with each refreash or visit?

  • Thread starter Thread starter Guest
  • Start date Start date
G

Guest

I need to have a given nature jpeg photo (say 200x150 oixels in size) change
each time a visitor visits the website or refreshes. This is better known as,
the picture of the day. I do not want to use Flash, rather I need something
like a slide show that changes.

Thanks in advance!

James
 
Google for "random slide show"

Also if your site is on an Apache Unix server and has a web masters CPanel, there is a built
in feature that will do this for you.
 
Try this script:
change the file names "random1.gif, random2.gif" etc to your files.

<script language="JavaScript">
<!--
// ==============================================
// Copyright 2003 by jsCode.com
// Source: jsCode.com
// Author: etLux
// Free for all; but please leave in the header.
// ==============================================

// Set up the image files to be used.
var theImages = new Array() // do not change this
// To add more image files, continue with the
// pattern below, adding to the array. Rememeber
// to increment the theImages[x] index!

theImages[0] = 'images/random/random1.gif'
theImages[1] = 'images/random/random2.gif'
theImages[2] = 'images/random/random3.gif'
theImages[3] = 'images/random/random4.gif'
theImages[4] = 'images/random/random5.gif'
theImages[5] = 'images/random/random6.gif'
theImages[6] = 'images/random/random7.gif'
// ======================================
// do not change anything below this line
// ======================================

var j = 0
var p = theImages.length;

var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer = new Image()
preBuffer.src = theImages
}

var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write('<img src="'+theImages[whichImage]+'">');
}

//-->
</script>



Put this code where you want the image to be displayed
<script language="JavaScript">
<!--
showImage();
//-->
</script>

Works well enough and I use it on my site: www.murraywebs.com

Hit F5, and a new image loads with each refresh/reload of the page.


"Virginias Best Kept Secret" <Virginias Best Kept
(e-mail address removed)> wrote in message
news:[email protected]...
 
Andrew said:
Try this script:
Click to expand...

Great script.
Two small points:
1. Is this declaration correct: var j = 0 ?
Should it be: var i = 0 since the variable j is not used whereas the
variable i is ?
2. The script should be pasted into the <head> section.

I also had a look at your site and it looks great.
While I am no expert at site building, may I make one small comment?
This page http://www.applecross.perth.anglican.org/ is a different width
from the home page which calls it, and so I have to scroll on a 1028*768
screen

Did you design for a fixed width?
 
Thanks for the advice on the site below, should be fixed now - the dynamic
web template was set inadvertantly at a wider setting because the include
page header was making it wider.

I don't know anything about the variable issue on the random picture script;
the script works for me as it is written. It was simply a copy and paste
script.

Trevor L. said:
Andrew said:
Try this script:
Click to expand...

Great script.
Two small points:
1. Is this declaration correct: var j = 0 ?
Should it be: var i = 0 since the variable j is not used whereas the
variable i is ?
2. The script should be pasted into the <head> section.

I also had a look at your site and it looks great.
While I am no expert at site building, may I make one small comment?
This page http://www.applecross.perth.anglican.org/ is a different width
from the home page which calls it, and so I have to scroll on a 1028*768
screen

Did you design for a fixed width?

--
Cheers,
Trevor L.
[ Microsoft MVP - FrontPage ]
MVPS Website: http://trevorl.mvps.org/
Click to expand...
 
Andrew said:
Thanks for the advice on the site below, should be fixed now - the
dynamic web template was set inadvertantly at a wider setting because
the include page header was making it wider.

I don't know anything about the variable issue on the random picture
script; the script works for me as it is written. It was simply a
copy and paste script.
Click to expand...

Andrew,
Thanks for your reply.

I am glad you now have made the widths on your site consistent

Re the script:
Yes, the problem is with the script as supplied. The author defined a
variable (j) and then didn't use it. Instead he/she used another one (i). It
still works because JS will define a variable if it isn't already (although
I think it defines it as global, whether it is inside a function ot not. )

The point is quite academic but the readers of the NG may want to know.
 
Hi Steve,

After many more hours of searching I found out what the phrase is actually
called. (Scheduled Pictures & Scheduled Banners along with an interesting
option called Scheduled Pages) using FrontPage.

The (Banner Ad Manager) offers the best options as the software does not
care about the actual dimensions of the photo. I’m surprised that with all
the know how here, that the only terminology that was posted was, “Slideshowâ€
of which was my first guess as well. FrontPage does not respond to the search
phrase, "Slideshow". Dreamweaver uses none of these terms or phrases at all,
so that's even a bigger challange.

Note: I’m not into script, though I do know how to use it, but limitedly.

Thanks for your help Steve, nonetheless,

James.
 
I could not find any slideshows at your, www.murraywebs.com website.



Andrew Murray said:
Try this script:
change the file names "random1.gif, random2.gif" etc to your files.

<script language="JavaScript">
<!--
// ==============================================
// Copyright 2003 by jsCode.com
// Source: jsCode.com
// Author: etLux
// Free for all; but please leave in the header.
// ==============================================

// Set up the image files to be used.
var theImages = new Array() // do not change this
// To add more image files, continue with the
// pattern below, adding to the array. Rememeber
// to increment the theImages[x] index!

theImages[0] = 'images/random/random1.gif'
theImages[1] = 'images/random/random2.gif'
theImages[2] = 'images/random/random3.gif'
theImages[3] = 'images/random/random4.gif'
theImages[4] = 'images/random/random5.gif'
theImages[5] = 'images/random/random6.gif'
theImages[6] = 'images/random/random7.gif'
// ======================================
// do not change anything below this line
// ======================================

var j = 0
var p = theImages.length;

var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer = new Image()
preBuffer.src = theImages
}

var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write('<img src="'+theImages[whichImage]+'">');
}

//-->
</script>



Put this code where you want the image to be displayed
<script language="JavaScript">
<!--
showImage();
//-->
</script>

Works well enough and I use it on my site: www.murraywebs.com

Hit F5, and a new image loads with each refresh/reload of the page.


"Virginias Best Kept Secret" <Virginias Best Kept
(e-mail address removed)> wrote in message
I need to have a given nature jpeg photo (say 200x150 oixels in size)
change
each time a visitor visits the website or refreshes. This is better known
as,
the picture of the day. I do not want to use Flash, rather I need
something
like a slide show that changes.

Thanks in advance!

James
Click to expand...
Click to expand...
 
You do not want to use the FP Banner Ad Manager, as many of your site visitors will not be bale to
see the images, etc. You will need to use JavaScript, if you want everyone to be able to see your
images,

--
==============================================
Thomas A. Rowe
Microsoft MVP - FrontPage
==============================================
Agents Real Estate Listing Network
http://www.NReal.com
==============================================
 
Okay. So then how or what plug-ins should I use with FP 2003?

Is there a link to a working example I can checkout?
 
Type the following into your IE address bar:

? JavaScript Image Rotation Script

--
==============================================
Thomas A. Rowe
Microsoft MVP - FrontPage
==============================================
Agents Real Estate Listing Network
http://www.NReal.com
==============================================
 
The picture on the homepage *is* a sample of the slideshow script you're
asking about. (refresh the page, the image changes).

The image next to the pargraph commencing "Welcome to the information super
highway...." You have to press F5 key to reload the page - the picture
should change (randomly, so you might get the same image twice in a row).

Did you try the script below? You said you wanted a script that changes the
picture each time the page is reloaded. The script below, which I use on my
home page on www.murraywebs.com does just that.



"Virginias Best Kept Secret"
I could not find any slideshows at your, www.murraywebs.com website.



Andrew Murray said:
Try this script:
change the file names "random1.gif, random2.gif" etc to your files.

<script language="JavaScript">
<!--
// ==============================================
// Copyright 2003 by jsCode.com
// Source: jsCode.com
// Author: etLux
// Free for all; but please leave in the header.
// ==============================================

// Set up the image files to be used.
var theImages = new Array() // do not change this
// To add more image files, continue with the
// pattern below, adding to the array. Rememeber
// to increment the theImages[x] index!

theImages[0] = 'images/random/random1.gif'
theImages[1] = 'images/random/random2.gif'
theImages[2] = 'images/random/random3.gif'
theImages[3] = 'images/random/random4.gif'
theImages[4] = 'images/random/random5.gif'
theImages[5] = 'images/random/random6.gif'
theImages[6] = 'images/random/random7.gif'
// ======================================
// do not change anything below this line
// ======================================

var j = 0
var p = theImages.length;

var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer = new Image()
preBuffer.src = theImages
}

var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write('<img src="'+theImages[whichImage]+'">');
}

//-->
</script>



Put this code where you want the image to be displayed
<script language="JavaScript">
<!--
showImage();
//-->
</script>

Works well enough and I use it on my site: www.murraywebs.com

Hit F5, and a new image loads with each refresh/reload of the page.


"Virginias Best Kept Secret" <Virginias Best Kept
(e-mail address removed)> wrote in message
I need to have a given nature jpeg photo (say 200x150 oixels in size)
change
each time a visitor visits the website or refreshes. This is better
known
as,
the picture of the day. I do not want to use Flash, rather I need
something
like a slide show that changes.

Thanks in advance!

James
Click to expand...
Click to expand...
Click to expand...
 
Back
Top