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
