SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    modify slideshow script so it doesn't preload all images

    hi everyone,

    i found this slideshow script which is exactly what i was looking for but after i implemented it and added over 30 pictures, i realized that it preloads all the photos and takes forever for the page to open. i don't know much (any, really) about javascript and would really appreciate any help on how to modify it so it loads one picture at time upon clicking 'next'. thank you all!

    <html>

    <head>
    <title></title>
    <style type="text/css">

    #slideshowContainer{
    width: 300px;
    height: auto;
    }

    #numberDiv a{
    font: bold 14px Arial;
    text-decoration: none;
    }

    #backforthbuttons{
    margin-top: 6px;
    }

    </style>
    <script type="text/javascript">

    // Index It Image Slideshow script- By JavaScriptKit.com
    // For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
    // This notice must stay intact for use

    //Specify images for slideshow:
    //["Image Path", "Optional Image link"]

    var numberslide=new Array()
    numberslide[0]=["images/photo1.jpg", "http://www.google.com"]

    numberslide[1]=["images/photo2.jpg", ""]
    numberslide[2]=["images/photo3.jpg", ""]
    numberslide[3]=["images/photo1.jpg", ""]
    numberslide[4]=["images/photo2.jpg", ""]

    var mylinktarget="" //specify optional link target
    var mylinkcolor="navy" //specify default color of number links
    var mylinkcolorSelected="red" //specify color of selected links

    var imgborderwidth=0 //specify border of image slideshow

    /////Stop customizing here////////////////

    var preloadit=new Array()
    for (i=0;i<numberslide.length;i++){
    preloadit[i]=new Image()
    preloadit[i].src=numberslide[i][0]
    }

    var currentindex=""

    function changeslides(which){
    var imghtml=""
    currentindex=(which=="initial")? 0 : parseInt(which)
    var mode=(which=="initial")? "initial" : ""
    var which=(mode=="initial")? numberslide[0] : numberslide[which]
    if (which[1]!="")
    imghtml='<a href="'+which[1]+'" target="'+mylinktarget+'">'
    imghtml+='<img src="'+which[0]+'" border="'+imgborderwidth+'">'
    if (which[1]!="")
    imghtml+='</a>'

    if (mode=="initial")
    document.write('<div>'+imghtml+'</div>')
    else{
    document.getElementById("imagecontainer").innerHTML=imghtml
    changecolors()
    }
    }

    function createnumbers(){
    document.write('<a href="javascript:changeslides(0)" style="color:'+mylinkcolorSelected+'">0</a> ')
    for (i=1; i< numberslide.length; i++)
    document.write('<a href="javascript:changeslides(\''+i+'\')">'+i+'</a> ')
    }

    function changecolors(){
    var numberobj=document.getElementById("numberDiv")
    numberlinks=numberobj.getElementsByTagName("A")
    for (i=0; i<=currentindex; i++)
    numberlinks[i].style.color=mylinkcolorSelected
    for (i=currentindex+1; i<numberslide.length; i++)
    numberlinks[i].style.color=mylinkcolor
    }

    function goforward(){
    if (currentindex<numberslide.length-1)
    changeslides(currentindex+1)
    }

    function goback(){
    if (currentindex!=0)
    changeslides(currentindex-1)
    }

    </script>
    </head>

    <body>
    <div id="slideshowContainer"><div id="imagecontainer"><script type="text/javascript">
    changeslides("initial") //This call displays the first image
    </script>
    </div><div
    id="numberDiv"><script type="text/javascript">
    createnumbers() //This call writes out the numbers
    </script>
    </div><div id="backforthbuttons"><a
    href="javascript:goforward()" style="float: right">
    <dd>Next</a> <a href="javascript:goback()">Previous</a> </dd>
    </div>

    </div>
    </body>
    </html>

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,044
    Mentioned
    187 Post(s)
    Tagged
    2 Thread(s)

    w/o preloading

    The preloading occurs when the script calls new Image() It doesn't look like the script references the preloadit array, so you should be able to do "on click" loading by commenting out the preload function. ie.
    HTML Code:
    /////Stop customizing here////////////////
    /* DON'T WANT PRELOADING
    var preloadit=new Array()
    for (i=0;i<numberslide.length;i++){
    preloadit[i]=new Image()
    preloadit[i].src=numberslide[i][0]
    }
    */
    var currentindex=""


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
  •