Simple picture gallery with thumbnails for a website
by David Halls
Toyota Corolla
This type of simple gallery with thumbnails is often found on the web and is used to display images of used cars (e.g. Auto Trader UK) and to display the accommodation in hotels (e.g. The Drummond Hotel, St Fillans, Perthshire). It works best when all images are the same aspect ratio and all in "landscape" mode. This is illustrated above by some images of a Toyota Corolla that I used to own. You click on the thumbnail to see the full image in the frame above.
The images
The images should be reduced to their final size (in this example, 300 x 225px ) and then optimised for web use In Adobe Photoshop, you use the "Save for web" option whereas in Paint Shop Pro, you "Export" using the "JPEG optimiser".
If you have neither of these, I can recommend the free Faststone Image Viewer. With this, you use "Save As" and then click on the button "Options", which allows you to choose the degree of lossless compression. I use a value of about 27 which produces much smaller files with no visible loss of quality.
The thumbnails are 70 x 53px. They could be produced by your imaging software. Their small size will ensure they load quickly but the code to handle them and their full size images will be more complicated than the code shown here. What we will do is display the full images at the smaller 70 x 53px. The loading times did not seem to be a problem for me.
The array of images
We construct an array in Javascript containing the relative URLs of the images. 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"> <!-- var imglist = new Array ( "corolla/toyota1.jpg", "corolla/toyota2.jpg", "corolla/toyota3.jpg", "corolla/toyota4.jpg" ) //--> </script>
The function to display the images
In the body of the page, we create a div to act as a container for the gallery. This contains the main image and a div to act as a container for the thumbnails.
To the Javascript in the head section, we add a function, showimg, which requires a variable, arrayno, to allow the correct image to be displayed. It changes the source of the image, myimage.
Within the <body> section of the page:
<div id = "imagecontainer">
<img id = "myimage" / >
<div id = "thumbscontainer"></div>
</div>
and within the Javascript in the <head> of the page:
function showimg(arrayno) {
myimage.src = imglist[arrayno];
}
Producing the thumbnails and links
We now add code to produce the thumbnails which acts as links to change the main image with the function showimg. The code is added after the html to produce the div imagecontainer
- Firstly, we display the main image which will initially be the first image in the array, using showimg(0).
- Then we create the html which is going to be inserted into the div thumbscontainer. we iterate through the array adding the images and making them into links which will show the relevant image in the main container when the image is clicked. In this process, the iamge size is reduced to a width of 70px and height 53px.
- The html we created is then inserted into the div thumbscontainer using the expression
document.getElementById("thumbscontainer").innerHTML= html;
<div id = "imagecontainer">
<img id = "myimage" />
<div id = "thumbscontainer"></div>
<script language="Javascript" type="text/javascript">
<!--
showimg(0);
var html = "";
for (var i=0;i<imglist.length;i++)
{
html = html + "<a href = '#' onclick = 'showimg(" + i + ");return false;'><img src='" + imglist[i] + "' /></a>";
}
document.getElementById("thumbscontainer").innerHTML= html;
//-->
</script>
Styling the gallery
Using CSS, we need to set the size of the gallery area (#imagecontainer), its background colour, apply a border if required and align the large image in the horizontal centre of the area. To do this for all common browsers, text-align is set to "center" and the left and right margins set to auto.
The links surrounding the thumbnails are displayed as a block slightly larger than the thumbnail are given a background color (gray) when the mouse hovers over it.
Fine, we have the thumbnail highlighted by the darker border when we hover over it. However, it would also be good if the thumbnail stayed highlighted to show which thumbnail we have clicked on. This is where we run into problems with the different ways browsers interpret link pseudoclasses. In Internet Explorer, the active link will change its bacground color if we apply the property to the pseudoclass a:active; Firefox will not but it will for a:focus. We can make the CSS apply to the two states as shown below, which will cover the two main web browsers. Safari for Windows and Google Chrome both show the highlighting for the hover state but not for either the active or focus state.
Is n't CSS frustrating? The amount of time we waste trying to solve silly problems like this.
<style type = "text/css">
#imagecontainer
{height:330px;
width:400px;
border: 1px solid black;
background-color:silver;
text-align:center;
padding-top:20px;
padding-bottom:10px;
margin-left:auto;
margin-right:auto;
}
#thumbscontainer {
padding:0;
margin-top:10px;
margin-left: 45px;
}
#myimage {
width: 300px;
height:225px;
border:0;
}
#thumbscontainer img {
width:70px;
height:53px;
border:0;
}
#thumbscontainer a {
display:block;
float:left;
height:55px;
width: 72px;
padding:3px;
margin:0px;
text-decoration:none;
}
#thumbscontainer a:hover {
background-color:gray;
}
#thumbscontainer a:active, #thumbscontainer a:focus {
background-color:gray;
}
</style>
A variant - change the image by hovering the mouse over a thumbnail
As shown below, the image changes simply by hovering your mouse over the relevant thumbnail.
The only change necessary is to replace onclick with onmouseover, as shown in the line below.
{html = html + "<a href = '#' onmouseover = 'showimg(" + i + ");return false;'><img src='" + imglist[i] + "' /></a>";}
However, there is a danger that a user might try to click the thumbnail as well which will move focus to the top of the page. A way round this is to have both events - onmouseover and onclick - in the same link:-
{html = html + "<a href = '#' onmouseover = 'showimg(" + i + ");return false;' _
onclick = 'showimg(" + i + ");return false;'><img src='" + imglist[i] + "' /></a>";}
The mouse hover action will precede a click, so the image will change. Clicking will simply do the same action, i.e. the image will not change further.
Conclusion
The code for the gallery shown here is relatively straightforward but the CSS is frustratingly complex. It will provide a basis for cases where a simple gallery of images of the same size is required.
A previous article allows a more flexible approach but without thumbnails. A further article shows a more developed version of that gallery.
Article Date: 11th October 2009.