Results 1 to 9 of 9

Thread: Javascript - Load new images on each page load/refresh

  1. #1
    Join Date
    Oct 2008
    Posts
    9
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default Javascript - Load new images on each page load/refresh

    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

  2. #2
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    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/s...ad.php?t=57526

    If you have any questions let us know.
    Corrections to my coding/thoughts welcome.

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    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:

    HTML Code:
    <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:

    Code:
    	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
    Last edited by jscheuer1; 10-02-2010 at 04:41 PM. Reason: correction/completeness
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. The Following User Says Thank You to jscheuer1 For This Useful Post:

    spook_man (10-04-2010)

  5. #4
    Join Date
    Oct 2008
    Posts
    9
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default It works!

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

  6. #5
    Join Date
    Oct 2013
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default how do i add a link to open on a new page to this image refresh on page load script

    Code:
    <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>
    Last edited by keyboard; 12-10-2013 at 11:17 PM. Reason: Format: Code Tags [code][/code]

  7. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    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:

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. The Following User Says Thank You to jscheuer1 For This Useful Post:

    shaisoft2000 (10-04-2013)

  9. #7
    Join Date
    Oct 2013
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

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

  10. #8
    Join Date
    Dec 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Can an onclick event be added?

    Quote Originally Posted by jscheuer1 View Post
    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:

    Code:
    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:

    HTML Code:
    <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:

    Code:
    	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.')"

  11. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    Please start a new thread for a new question.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •