A simple picture gallery for a website
by David Halls
The Falkirk Wheel
The design is not original as similar versions can be seen on many websites, especially the BBC website. I did however want to make the code simple and easy to use. The gallery will take pictures in portrait or landscape orientation but they should be of the same height (in this case, 400px).
Underneath the image are a series of numbers which, when clicked, will bring up a different image. The numbers are links which are set up by CSS to appear as small blocks.
The image container
The container for the image and the links is a <div> with a fixed height and width. Styling with CSS can give it a background color, a border and central alignment.
Within the <div>, we place the image that we wish to appear when the page is loaded. Normally I like to specify the image height and width for a fixed image, but as our images have different widths, we can omit the height and width to give a simpler code. The code so far is:-
<div id = "imagecontainer"> <img id = "myimage" src="falkirk/falkirk4.jpg"> <div>
The styling information for the container is included in a separate style sheet or in the <head> section of the page and is:-
<style type = "text/css">
#imagecontainer
{height:470px;
width:620px;
border: 1px solid black;
background-color:#F0F0F0;
text-align:center;
padding-top:20px;
margin-left:auto;
margin-right:auto;}
</style>
Adding the links
The links use inline Javascript to change the source of the image in the image container. If we want the links to do something more like add separate captions, we might need to make a Javascript function to react to the click, but for a simple application, inline Javascript will do. The additional line "return false;" prevents the link acting which would go to "#", normally the top of the page.
<div id = "imagecontainer"> <img id = "myimage" src="falkirk/falkirk4.jpg"> <br /><br /> <a href = "#" onclick= "javascript:myimage.src = 'falkirk/falkirk1.jpg';return false;">1</a> <a href = "#" onclick= "javascript:myimage.src = 'falkirk/falkirk2.jpg';return false;">2</a> <a href = "#" onclick= "javascript:myimage.src = 'falkirk/falkirk3.jpg';return false;">3</a> <a href = "#" onclick= "javascript:myimage.src = 'falkirk/falkirk4.jpg';return false;">4</a> <a href = "#" onclick= "javascript:myimage.src = 'falkirk/falkirk5.jpg';return false;">5</a> <a href = "#" onclick= "javascript:myimage.src = 'falkirk/falkirk6.jpg';return false;">6</a> <a href = "#" onclick= "javascript:myimage.src = 'falkirk/falkirk7.jpg';return false;">7</a> <a href = "#" onclick= "javascript:myimage.src = 'falkirk/falkirk8.jpg';return false;">8</a> <a href = "#" onclick= "javascript:myimage.src = 'falkirk/falkirk9.jpg';return false;">9</a> <a href = "#" onclick= "javascript:myimage.src = 'falkirk/falkirk10.jpg';return false;">10</a> <a href = "#" onclick= "javascript:myimage.src = 'falkirk/falkirk11.jpg';return false;">11</a> <a href = "#" onclick= "javascript:myimage.src = 'falkirk/falkirk12.jpg';return false;">12</a> </div>
Styling the links is important.
#imagecontainer a{
text-decoration:none;
font-family:arial, helvetica, sans-serif;
font-size:10pt;
color:black;
background-color:silver;
border: 1px solid black;
padding-left:10px;
padding-right:10px;
margin:5px;}
#imagecontainer a:active {
background-color:gray;
color:white;
}
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. The active link is highlighted by a darker background and a change of text from black to white.
Conclusion
This type of gallery is suitable for a related set of images on a common theme. A single caption thus can apply to all images.
For a caption to change with each image would require a further stage of complexity in the code. How to do this is described in a subsequent article. To incorporate control through the left and right arrows on the keyboard, see this article.
Article Date: 3rd January 2009. Updated: 15th March 2011.