Modifications to a simple picture gallery for a website
by David Halls
Ardrishaig and the Crinan Canal
An earlier article described a simple picture gallery using inline javascript. In this article, I will describe some modifications to allow:-
- Use of "Prev" and "Next" buttons to allow sequential movement through the gallery.
- Addition of captions for each individual image/
To achieve this, we will need to move away from inline javascript and set up a function to change the image and caption. The image filenames and the captions will be held in separate arrays.
The arrays
Firstly, we construct two arrays in Javascript - one containing the relative URLs of the images and the other the corresponding captions. Note that the items in the array are between inverted commas and that they are separated by commas. There should be no comma after the last entry.
Within the <head> section of the page: <script language="Javascript" type="text/javascript"> <!-- imglist = new Array ( "crinan/ardrishaig_harbour.jpg", "crinan/ardrishaig_harbour_2.jpg", "crinan/ardrishaig_basin.jpg", "crinan/sealock.jpg", "crinan/ardrishaig_lighthouse.jpg", "crinan/cottages.jpg", "crinan/yacht.jpg", "crinan/marina.jpg" ) imgtitle = new Array ( "Ardrishaig Harbour", "Ardrishaig Harbour - entrance to lock", "Ardrishaig Basin", "Ardrishaig Sea Lock", "Lighthouse in Ardrishaig Harbour", "Cottages at Dunardry", "Yacht on Crinan Canal", "Marina on Canal at Bellanoch" ) //--> </script>
The function to display the images
A variable, locator, is defined. This will be used to indicate the current position in the array and is important later for establishing what is the previous and next position in the series. We will later add links to allow Javascript to change the source of the image in the image container. The function, showimg, requires a variable, arrayno, to allow the correct image and caption to be displayed. It changes the source of the image, myimage, and changes the innerHTML of the division, imagetitlespace.
Within the <body> section of the page:
<div id = "imagecontainer">
<img id = "myimage" >
<div id = "imagetitlespace"></div>
</div>
and within the Javascript in the <head> of the page:
var locator;
function showimg(arrayno) {
myimage.src = imglist[arrayno];
locator = arrayno;
var caption;
caption = document.getElementById("imagetitlespace");
caption.innerHTML = imgtitle[arrayno];
}
Setting up the links
We now modify the div, imagecontainer, to include the links.
- The first will be a link to show the previous image. Clicking on this will call a function, previmg, which will be shown shortly. The additional line "return false;" prevents the link acting which would go to "#", normally the top of the page.
- The next numbered links are set up from the array, imglist. The array starts at 0 but we want our links to start at 1 so i + 1 is displayed. The link is given an id = i which helps us to determine which link is active.
- The function showimg(0) is called to show the first image in the array when the page loads.
- The last link, Next, calls a function, nextimg.
<div id = "imagecontainer">
<img id = "myimage" >
<div id = "imagetitlespace"></div>
<a href = "#" id = '" +i+ "'onclick = "previmg(locator);return false;">Prev</a>
<script language="Javascript" type="text/javascript">
<!--
for (var i=0;i<imglist.length;i++)
{document.write ("<a href = '#' onclick = 'showimg(" + i + ");return false;'>" + (i+1) +"</a>");
}
showimg(0);
//-->
</script>
<a href = "#" onclick = "nextimg(locator);return false;">Next</a>
</div>
The links are given a background color and a border and link underlining is removed (text-decoration:none). They are given a little extra width by padding on either side. We want the active link to be highlighted by a darker background and a change of text from black to white. With this version. it is not sufficient to use the CSS of the link to determine this, as the user may have arrived at a given picture by pressing the Prev or Next buttons. So we are going to use Javascript to set the style of the button linked to the picture.
for (var i=0;i<imglist.length;i++)
{var basiclink = document.getElementById(i);
basiclink.style.backgroundColor = "silver";
basiclink.style.color = "black";}
var highlightlink = document.getElementById(arrayno);
highlightlink.style.backgroundColor = "gray";
highlightlink.style.color = "white";
First we reset all links to a background colour of silver and a text colour of black using a for loop. Then we set the active image link to a background colour of gray and a text colour of white. This section of code is added to the function showimg(arrayno) which thus becomes:-
function showimg(arrayno) {
myimage.src = imglist[arrayno];
locator = arrayno;
var caption;
caption = document.getElementById("imagetitlespace");
caption.innerHTML = imgtitle[arrayno];
for (var i=0;i<imglist.length;i++)
{var basiclink = document.getElementById(i);
basiclink.style.backgroundColor = "silver";
basiclink.style.color = "black";}
var highlightlink = document.getElementById(arrayno);
highlightlink.style.backgroundColor = "gray";
highlightlink.style.color = "white";
}
The functions for Previous and Next image
The variable locator indicates the location of the last image to be shown. The links "Prev" and "Next" call the functions, previmg(locator) and nextimg(locator), respectively.
The code below shows these functions, which are included in the Javascript section in the <head> section of the page.
The function previmg first checks it is not already at the beginning of the array and then subtracts 1 from the value of locator. It then calls showimg with the new value of locator.
In a similar manner, nextimg checks it is not at the end of the array and then increments locator.
function previmg(arrayno) {
if (arrayno!==0)
{
arrayno= arrayno -1;
showimg(arrayno);
}}
function nextimg(arrayno) {
if (arrayno!==imglist.length-1)
{arrayno= arrayno +1;
showimg(arrayno);
}}
Conclusion
The code for the gallery shown here is more complex than in that shown in the previous article but it allows captions for each image and allows the use of "Previous" and "Next" buttons. To incorporate control through the left and right arrows on the keyboard, see this article.
Article Date: 25th February 2009. Amended 28th July 2009 and 15th March 2011.