Producing an Image Gallery by Hand

Google+ Pinterest LinkedIn Tumblr +

Introduction
In this article I show you how to write code for an image gallery. An image gallery is just a collection of images. Usually these images are small. When you click one you see an enlarged form of it.

You need basic knowledge in HTML, CSS, JavaScript and DOM to understand this article.

Note: If you cannot see the code or if you think anything is missing in this article (broken link, image absent), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

Some CSS and JavaScript Principles
One image can be displayed on the same web page by more than one image tags. What matters to display a particular image is the value (URL) of the source attribute. You can use JavaScript (and DOM) to change this value for an image tag. An image tag can have many attributes and values. If you change only the value, of the source attribute of the image tag, the image the tag is displaying will change. However, the new image will have the same CSS properties (size, for example) as the previous image.

Example
There are different designs for an image gallery. I will use a simple example here. Afterward, you can modify the code to suit your commercial project. In this example there are five small images in a web page. When you click a small image, its enlarged form appears higher up in the page. The five images are in a row.

Layout
Whenever the elements of your web page are in the form of a grid, row or column, you can use the HTML Table element. So for this example, you need two tables. The first one higher up in the web page has one row and three cells. The first cell may have some text. The second cell has the enlarged image, and the third cell may have some text. The second table has one row but with five cells for the five small images. All the small images are of the same size. There is only one big image, which is the enlarged image. This is the HTML code for the table elements:

Some text can go here.img1.jpg
Some text can go here.

img1.jpg
src=”img2.jpg” onclick=”enlarge(event)”img3.jpg

Share.

About Author

Leave A Reply