Photo Album

This script is a bit more difficult to customize then most, but is extremely handy for showing off a large number of identically-sized photos on a single page. The "arrows" allow you to move through the pictures forwards and backwards, 1 or 5 pictures at a time. You will also need to give your pictures numbers for names, such as "1.jpg" or "1.gif" in a sequential order.

Our goal:

<<   <    >   >>


This first section of the script can go between the <HEAD> and </HEAD> tags. Stuff in blue must be changed to accomodate the number of pictures (and captions) that you will have in your album. You will also need to add the attribute onLoad="myGallery()" to the <BODY> in order for this script to work. This example only shows 8 pictures, but it can be expanded to as many as needed. Keep in mind that the array in this script shows a 0 for 1, 1 for 2 and so on.

<SCRIPT language=JavaScript>
<!--
/* This JavaScript was composed by Kristin J. Johnson.
*The Wererat's Lair: https://wererat.net/ */
   var picNum = 1;
   var maxVal = 8;

   var picArray = new Array('1','2','3','4','5','6','7','8')
    picArray[0] = "Text for picture number 1."
    picArray[1] = "Text for picture number 2."
    picArray[2] = "Text for picture number 3."
    picArray[3] = "Text for picture number 4."
    picArray[4] = "Text for picture number 5."
    picArray[5] = "Text for picture number 6."
    picArray[6] = "Text for picture number 7."
    picArray[7] = "Text for picture number 8."

   function myGallery() {
    document.gallery.mynumber.value = picNum + ' of ' + maxVal;
    document.gallery.mytext.value = '!';
    if (picArray[picNum-1] != null) {
    document.gallery.mytext.value = picArray[picNum-1];
    }

   }

   function picNav(navVal) {
    if (navVal == 'f') {
     pNum = picNum + 1;
     if (pNum > maxVal) pNum = 1;
    }
    if (navVal == 'f5') {
     pNum = picNum + 5;
     if (pNum > maxVal) {
      gNum = pNum - maxVal;
      pNum = gNum;
     }
    }
    if (navVal == 'b') {
     pNum = picNum - 1;
     if (pNum < 1) pNum = maxVal;
    }
    if (navVal == 'b5') {
     pNum = picNum - 5
     gNum = picNum - 5;
     if (gNum < 1) {
      pNum = maxVal + gNum;
     }
    }

    picNum = pNum;
    document.gallery.mytext.value = picArray[picNum-1];
    document.gallery.mynumber.value = picNum + ' of ' + maxVal;
    document.images[0].src = 'images/' + picNum + '.jpg';
   }
//-->
</SCRIPT>

Stuff in blue must corrospond with the same items in blue in the above script. Stuff in this color can be changed if desired. This form must go between the <BODY> and </BODY> tags.

<CENTER>
<FORM NAME="gallery">

<A HREF="#" onClick="picNav('b5')"
STYLE="text-decoration:none">
<FONT FACE="Tahoma, Verdana, Arial" SIZE=+1>
<B>
&lt;&lt;
</B>
</FONT>
</A>
&nbsp;&nbsp;

<A HREF="#" onClick="picNav('b')" STYLE="text-decoration:none">
<FONT FACE="Tahoma, Verdana, Arial" SIZE=+1>
<B>
&lt;
</B>
</FONT>
</A>

&nbsp;
<INPUT TYPE="text" NAME="mynumber" SIZE=10>
&nbsp;

<A HREF="#" onClick="picNav('f')" STYLE="text-decoration:none">
<FONT FACE="Tahoma, Verdana, Arial" SIZE=+1>
<B>
&gt;
</B>
</FONT>
</A>
&nbsp;&nbsp;

<A HREF="#" onClick="picNav('f5')" STYLE="text-decoration:none">
<FONT FACE="Tahoma, Verdana, Arial" SIZE=+1>
<B>
&gt;&gt;
</B>
</FONT>
</A>

<P>
<CENTER>
<IMG SRC="images/1.jpg">
</CENTER>

<INPUT TYPE="text" NAME="mytext" SIZE=75>
</FORM>
</CENTER>


Grab a text file of this JavaScript and form (right-click and save it as a text file).


Important note: This script will not work properly with any graphic (such as a site logo) showing up higher up on the page than the photo slideshow. One work-around is to use CSS to include a picture above the album:

<STYLE>
body {
background-image : url(http://yourwebsite.com/images/yourlogo.gif);
background-repeat : no-repeat;
margin-left : 20px;}
</STYLE>


If you can run PHP on your site, there are much better, free software packages such as the one I use for my own photo albums.