Home Resources Bio Meet the Family
JavaScript
Images: Slide Show
Here is a relatively simple Javascript routine for a slide show ... with next/previous buttons to view the next or previous image.

    <html>
    <head>
    <title>Large Scout Images</title>

    <script language="JavaScript">
    var num=1
    img1=new Image()
    img1.src="beforehike2.jpg"
    img1.alt="Before the hike"
    nextOne="beforehike2.jpg"
    nextText="Before the hike"

    img2=new Image()
    img2.src="porch2.jpg"
    img2.alt="On the Porch"

    img3=new Image()
    img3.src="nadeparture2.jpg"
    img3.alt="Departure from Scout Cabin..."

    img4=new Image()
    img4.src="hut2.jpg"
    img4.alt="At Madison Spring Hut"

    img5=new Image()
    img5.src="mountaintop2.jpg"
    img5.alt="Atop the mountain"

    img6=new Image()
    img6.src="swimslide2.jpg"
    img6.alt="Coming down the swim slide"

    img7=new Image()
    img7.src="atthetop2.jpg"
    img7.alt="At the summit"

    img8=new Image()
    img8.src="hiking2.jpg"
    img8.alt="Hiking the trails.."

    function slideshow()
    {
         num=num+1
         if (num==8){num=1}
         nextOne=document.scoutpix.src=eval("img"+num+".src")
         nextText=document.scoutpix.alt=eval("img"+num+".alt")
    }

    function previous()
    {
         num=num-1
         if (num==1){num=8}
         nextOne=document.scoutpix.src=eval("img"+num+".src")
         nextText=document.scoutpix.alt=eval("img"+num+".alt")
    }
    </script>

    </head>
    <body>
    <a href="JavaScript:slideshow()">Next Picture</a>    
    <a href="JavaScript:previous()">Previous Picture</a>
    <img src="hut2.jpg" name="scoutpix" border=0>
    </body>
    </html>

This routine has 8 images. Follow the structure to add/delete images.

The routine also calls out two functions: slideshow and previous. Note that the name of the image displayed within the BODY area is called out from the function. We've made this bold to draw your attention. If you change the NAME of the image, change the values in the functions as well.

We also check to see if the current number is a "1" or "8", and reset "num" to be "8" in the first case and "1" in the second. This allows continual looping when you reach the end or beginning of the pictures.

Other Links
To view these images as a self-sustaining continual loop, try making an animated GIF with a program such as Mindworks' GIF Construction Set (lists for about $20). Quick, versatile and easy to use. http://www.mindworkshop.com/alchemy/gifcon.html
© 2024 Sampson4.com   ||   E-mail: offices@sampson4.com