A simple website image gallery
Creating an image gallery for your website isn’t difficult. Especially if you start simple and take a little time to learn some Javascript basics. In this tutorial, we’ll demonstrate how to create and call Javascript functions. In a later issue, you’ll learn how to build more complex online image galleries.
Collect images
Create a new folder within your main website images folder, and name it gallery. Place the images that you wish to display into the gallery folder. Make sure the images you’re using are optimized for the web and saved as either .jpg or .gif. It’s also a good idea to size them to the exact size they’ll be in the gallery. The images we’re using are 200 px wide by 150 px tall.
We’re using five photos we took at a zoo in South Carolina (A). Although we only have five photos, the simplicity of this type of image gallery makes it very easy to add more photos later.
Create the basic html page
Open your web development application of choice–we’ll use Notepad. As we stated in the previous article, Notepad isn’t typically our first choice, and it may not be your first choice either.
Start your picture viewer web page by entering the basic <html>, <head>, and <body> tags (B) and save it in the root of your website folder as imagegallery.html.
Javascript image array
Make some space between the opening <head> and closing </head> tags. Enter the opening <script type="text/Javascript"> tag to tell the browser that the web page is going to start using Javascript. Close the script tag by entering </script> on the next line (C).
We’re going to count through our images using an array with a variable named “galleryimages”. To start the array, enter galleryimages=new Array() after the opening script tag. Follow the array code with each of your gallery images on a separate line. Enter the following lines of code for each of the images (D):
galleryimages[0]="images/gallery/zebra.jpg"
galleryimages[1]="images/gallery/giraffe.jpg"
galleryimages[2]="images/gallery/bear.jpg"
galleryimages[3]="images/gallery/elephant.jpg"
galleryimages[4]="images/gallery/lion.jpg"
You may have noticed we started counting with zero. In programming, zero equals one.
Keeping count
An image gallery needs to keep count so it knows where the visitor is in the sequence of images. We’ll use the simple i=0 method for this example. Here’s how it works. After the list of images, add the following code on two separate lines (E):
imagecount=galleryimages.length-1
i=0
The variable named “imagecount” will let us keep count of the image we’re currently viewing in the image gallery. The value of i will be incremented or decremented dynamically so we can compare it to our imagecount variable. The outcome of the comparison will determine which image is shown when a navigation button is pressed.
In order to increment or decrement the value of i, we need to write Javascript functions for the navigation buttons in our image viewer. These functions will be tied to the viewer buttons within the code of our page. You can think of the functions as mini actions or simple directions each button follows. We’ll create four buttons−a “beginning” button, an “end” button, a “previous” button, and a “next” button.
The Functions
The first function we’ll add is our beginning function. The beginning function will jump the visitor to the very first image. Enter the following code after the i=0 line of code:
function beginning()
{
document.getElementById(‘gallery’).src=galleryimages[0]
i=0
}
The second function we’ll add is our previous function. The previous function will send the visitor to the previous image in our viewer. Enter the following code after the beginning function:
function previous()
{ if (i>0)
{ i--
document.getElementById('gallery').src= galleryimages[i]
}
}
The third function to add is the next function. The next function will send the visitor to the next image in our viewer. Enter the following code after the previous function:
function next()
{ if (i
document.getElementById('gallery').src= galleryimages[i]
}
}
The last function we’ll add is our end function. The end function will jump the visitor to the last image. Enter the following code after the next function:
function end()
{
document.getElementById('gallery').src= galleryimages[imagecount]
i=imagecount
}
Your list of functions should look like ours (F). You may have noticed the i-- and the i++ lines in the code. i-- is shorthand for writing i=i-1 and i++ is shorthand for i=i+1. Each function is controlled by the value of i, either explicitly set by a value (0 or the value of imagecount) or through an if statement.
Navigation Buttons
To enable the visitor to move forward or backward through the image gallery we need to add a few buttons. In between your opening <body> and closing </body> tags enter the following code (G):
<center>
<form>
<input type="button" value="<<" onclick="beginning()">
<input type="button" value="<" onclick="previous()">
<input type="button" value=">" onclick="next()">
<input type="button" value=">>" onclick="end()">
</form>
</center>
The four buttons above will call the Javascript functions you created earlier. As you can see we’re using greater than “>” or less than “<” signs for the value of our buttons. You could replace these with words like Start, Previous, Next, and End.
Image Gallery Screen and Window Size
You need an area to show the image each time a navigation button is pressed. Enter the following code above the opening <form> tag (H):
<img id="gallery" src="images/viewer/zebra.jpg" width="200" height="150"/>
The code above will place an area that’s 200 pixels wide by 150 pixels tall just above the navigation buttons. The zebra image is set to display first.
Our gallery is small in size−this means there will be a great big white area around it− making it look out of place. Let’s change the actual window size. After the opening <script type="text/Javascript"> tag enter the following code on its own line:
self.resizeTo(300,370);
The page will now resize itself to 300 pixels wide by 360 pixels tall. It’s a good idea to set the link to this page to open a new window (target="_blank"). This will ensure the rest of the visitor’s experience isn’t through a 300 x 370 pixel sized browser window. Save your imagegallery.html web page and open it in a web browser. You should have a small window that looks similar to ours (I).
Article written by Ian Caspersson
We'll help you stay on top of changes in the marketplace on the web, with computer applications, new industry trends, personal experiences, time-saving daily task shortcuts, and whatever else pops up.
Our eNewsletter is called "Umpteen Other Things" and you can sign up for it here.
It's completely FREE and we use SafeUnsubscribe which guarantees the permanent removal of your email address from our mailing list.