Make your own free website on Tripod.com

Image Gallery

Click on the buttons to view the pictures in my galery. This script is kinda tricky. It involves changing a lot of values depending on how many images you have. First, I will explain the script.Then you need to adjust the numbers that are in bold green according to how many images you have. This example has 6 images.

This part will go into you <head></head> tag.

<script language="JavaScript">
<!-- Hide this script from old browsers --
// Created by Doug Popeney (dpopeney@polymail.calpoly.edu)
// JavaScript Made Easy!! - http://www.calpoly.edu/~dpopeney/javascript.html

        var i = 1
        images = new Array
        images[1] = "YOUR FIRST IMAGE"
        images[2] = "IMAGE2"
        images[3] = "IMAGE3"
        images[4] = "IMAGE4"
        images[5] = "IMAGE5"
        images[6] = "YOUR LAST IMAGE"

function gallery(){
        if (i == 1){
                document.gallery.previous.value="       "}
}
function previmg(){
        if (i != 1) {
                i --
                document.img.src = images[i]
                document.gallery.next.value = "Next"}
        if (i == 1) {
                document.gallery.previous.value="        "}
        
}

function nextimg(){
        if (i != 6) {
                i ++
                document.gallery.previous.value="Previous"
                image = images[i]
                document.img.src = image}
        if (i == 6){
                document.gallery.next.value="    ";}
}

function pickrand(){
        var imagenumber = 6 ;
        var randomnumber = Math.random() ;
        var rand1 = Math.round( (imagenumber-1) * randomnumber) + 1;
        var randimage = images[rand1]
        document.img.src = randimage
        i = rand1
        if (i == 1){
                document.gallery.previous.value="        ";}
        else {
                document.gallery.previous.value="Previous";}
        if (i == 6){
                document.gallery.next.value="    ";}
        else {
                document.gallery.next.value="Next";}
}

function firstimg(){
        i = 1
        document.img.src = images[i];
        document.gallery.previous.value="        ";
        document.gallery.next.value="Next"
}
function lastimg(){
        i = 6
        document.img.src = images[i];
        document.gallery.next.value="    "
        document.gallery.previous.value="Previous"
}
// -- End Hiding Here -->
</script>
Now put this inside your body code.

<body onLoad="gallery();">

An example is:
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" VLINK="#000080" ALINK="#000080" onLoad="gallery();">
or
<body onLoad="gallery();">

Now put this where ever you want in your HTML document

<IMG SRC="YOUR FIRST IMAGE" name="img" border=0>
<form name="gallery">
<input type=button value="Previous" name="previous" onClick="previmg();">
<input type=button value="First" name="first" onClick="firstimg();">
<input type=button value="Random" name="random" onClick="pickrand();">
<input type=button value="Last" name="last" onClick="lastimg();">
<input type=button value="Next" name="next" onClick="nextimg();">
</form>

Now you need to change all the images, there should be 7 changes with this example.

To add more images you would just insert this line after the ones in the script that goes in the head tag that look exactly like it.

        images[7] = "IMAGE7"
Then you ned to adjust the number 6 to 7



Go Back to Doug's JavaScript Page