Javascript - Load new images on each page load/refresh

[spook_man]

Hello..
I'm looking for a javascript with will load three different random images (there are about 300+) on each page re-fresh or page load. The images are displayed in the banner.

See http://www.bainbridgetwp.com to see the images at the top in the banner.

Currently, we're using the Ultimate Fade-in slideshow (v2.4) and created three different fadeslideshows to display the images. But, with doing this, I noticed that there's a slow-down of the pages being loaded because the slideshow loads all 300+ images everytime.

So, 300+ images times 3 different slideshows equals almost 1000 images being loaded everytime. Images are small and are 5kb-3kb in size.

Thanks.. -Jeff

[bluewalrus]

Is javascript the only way you want to do this? Since it is a page load or refresh you could do it with server side code and it would be triggered for each of those. I made something similarish here using php:

http://www.dynamicdrive.com/forums/showthread.php?t=57526

If you have any questions let us know.

[jscheuer1]

If sticking with Ultimate Fade, you could select the images from a master array before inserting them in the init. If all of the images are of the same size or would fit into the same sized box:


var galleries = [];
(function(){
var images = [
['photo1.jpg'],
['photo2.jpg'],
['photo3.jpg'],
['photo4.jpg'],
['photo5.jpg'],
['photo6.jpg'],
['photo7.jpg'],
['photo8.jpg'],
['photo9.jpg'],
['photo10.jpg'] // <-- no comma after last image array
], i = 1;
images.sort(function(){return 0.5 - Math.random();});

for(i; i < 4; ++i){
galleries.push(new fadeSlideShow({
wrapperid: "fadeshow" + i, //ID of blank DIV on page to house Slideshow
dimensions: [140, 225], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: images.splice(0, 3),
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
}));
}
})();

This is instead of the three inits you must currently be using and will populate:


<div id="fadeshow1"></div><div id="fadeshow2"></div><div id="fadeshow3"></div>

Note: If linking the images, targeting the links, and/or adding descriptions, this may be done in the usual fashion, ex:


var images = [
['photo1.jpg', "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
['photo2.jpg'],
['photo3.jpg'],
['photo4.jpg'],
['photo5.jpg'],
['photo6.jpg'],
['photo7.jpg'],
['photo8.jpg'],
['photo9.jpg'],
['photo10.jpg'] // <-- no comma after last image array

[spook_man]

This is exactly what I was looking for. Thank you very much. -Jeff

[shaisoft2000]

<script language="JavaScript">
<!--

/*
Random Image Link Script- By JavaScript Kit(http://www.javascriptkit.com)
Over 200+ free JavaScripts here!
Updated: 00/04/25
*/

function random_imglink(){
var myimages=new Array()
//specify random images below. You can have as many as you wish
myimages[1]="http://www.computerhope.com/banners/banner.gif"
myimages[2]="http://www.computerhope.com/banners/banner2.gif"
myimages[3]="http://www.computerhope.com/banners/banner3.gif"
myimages[4]="http://www.computerhope.com/banners/banner4.gif"
myimages[5]="http://www.computerhope.com/banners/banner2.gif"
myimages[6]="http://www.computerhope.com/banners/banner3.gif"

//specify corresponding links below
var imagelinks=new Array()
imagelinks[1]="http://www.javascriptkit.com"
imagelinks[2]="http://www.netscape.com"
imagelinks[3]="http://www.microsoft.com"
imagelinks[4]="http://www.dynamicdrive.com"
imagelinks[5]="http://www.freewarejava.com"
imagelinks[6]="http://www.cnn.com"

var ry=Math.floor(Math.random()*myimages.length)
if (ry==0)
ry=1
document.write('<a href='+'"'+imagelinks[ry]+'"'+'><img src="'+myimages[ry]+'" border=0></a>')
}
random_imglink()
//-->
</script>

[jscheuer1]

In the future, please start a new thread for a new question.

The above script is outdated and flawed, but serviceable. The flaw is that it will pick 1 more often than any other image/link combo and will never pick the last image/link combo. That can be fixed by numbering the links and images starting from 0 instead of 1 and by removing:


if (ry==0)
ry=1

I'm not sure what you mean by a new page. All of those links in your post are new pages. To open the link in a new tab simply add the (red) target info:


document.write('<a target="_blank" href='+'"'+imagelinks[ry]+'"'+'><img src="'+myimages[ry]+'" border=0></a>')

[shaisoft2000]

Thanks John it worked. I'll do as advised next time. Cheers!!!

[danh]

If sticking with Ultimate Fade, you could select the images from a master array before inserting them in the init. If all of the images are of the same size or would fit into the same sized box:


var galleries = [];
(function(){
var images = [
['photo1.jpg'],
['photo2.jpg'],
['photo3.jpg'],
['photo4.jpg'],
['photo5.jpg'],
['photo6.jpg'],
['photo7.jpg'],
['photo8.jpg'],
['photo9.jpg'],
['photo10.jpg'] // <-- no comma after last image array
], i = 1;
images.sort(function(){return 0.5 - Math.random();});

for(i; i < 4; ++i){
galleries.push(new fadeSlideShow({
wrapperid: "fadeshow" + i, //ID of blank DIV on page to house Slideshow
dimensions: [140, 225], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: images.splice(0, 3),
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
}));
}
})();

This is instead of the three inits you must currently be using and will populate:


<div id="fadeshow1"></div><div id="fadeshow2"></div><div id="fadeshow3"></div>

Note: If linking the images, targeting the links, and/or adding descriptions, this may be done in the usual fashion, ex:


var images = [
['photo1.jpg', "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
['photo2.jpg'],
['photo3.jpg'],
['photo4.jpg'],
['photo5.jpg'],
['photo6.jpg'],
['photo7.jpg'],
['photo8.jpg'],
['photo9.jpg'],
['photo10.jpg'] // <-- no comma after last image array

Can an onclick event be added?
onclick="return confirm('You are about to leave our website. \n Click OK to continue on to the website.')"

[jscheuer1]

Please start a new thread for a new question.