JavaScript Gallery

Back Go back to previous page.

Let's now go through the steps to creating a JavaScript gallery using the Dynamic Drive script.

Building the Basic Gallery

Before we can build a dynamic gallery, we need to build a basic gallery as our starting point.

Preparing the Images

Before we get in to the details of applying the script, there are some basic preparations needed.

Firstly, you must prepare the images. In this case I created a set of thumbnail images, each about 150 pixels wide and, for each thumbnail, a corresponding main image about 650 pixels wide. Just to help you keep track, it's a good idea to chose related names for the images. For example, I used the names bgh-thumb.jpg and bgh‑display.jpg for the first pair of images. These images are probably best placed in the same folder as the gallery page itself.

Secondly, you need to insert your image thumbnails into your page. This could be done using a table, as I have in the example above, or you could position them where ever you like. Refer back to the pages on basic picture positioning and table layouts for more details.

The Basic Gallery

The next step is to create the basic gallery, including the necessary links, without any scripts being involved.

Start a new page in your site, or add the gallery to an existing page.

As shown below, I have used a simply table layout to organize my thumbnails (using tables is discussed here). Each thumbnail is then made into an image link to the associated full sized picture (linking images is discussed here). Click on any of the thumbnail images below and you will see that a new page opens displaying a larger version of the image. You can then use the browser's back button to return to this page.

Botanic Glass House Chan Temple Edinburgh Skyline

This basic gallery will be the basis for our dynamic gallery. By adding the necessary scripts and styles we will change how it behaves.

Getting the Scripts

There are three components to this: a script, a style sheet, and a GIF image.

All of these file, along with instructions on how to use them, can be found here. Go to the page download the three components and place them in the relevant sections of your site. For example, for this site, the script and the style sheet are saved into the include folder and the image is saved into the img folder.

Take note of the copyright notice for the script. You are required to include this in your page if you use this script.

Next, linking the scripts to your page... Next