This article describes an easy way to create an image gallery using Java Script.
How to start?
The first step towards creating an online gallery is to link the images and put them in a list.
<ul>
<li><a href="images/sun.jpg" title="A sun on the horizion">the sun</a></li>
<li><a href="images/landscape.jpg" title="Beautiful landscape">the landscape</a></li>
<li><a href="images/girl.jpg" title="Potrait of a girl">a girl</a></li>
<li><a href="images/vase.jpg" title="Flower vase">the vase</a></li>
</ul>
Clicking on any of those links will take you straight to the image. JavaScript can be used to intercept the click and execute a totally different action. The JavaScript updates a placeholder image and the description to create a slide show.
Use a blank .gif for the placeholder image. You can also easily use the first image in the gallery or some kind of “intro” image. Remember that both the image and the description need to have exceptional IDs. You can call the descriptive paragraph as desc and the image as placeholder
<p id="desc">Choose an image to begin</p>
<img id="placeholder" src="images/blank.gif" alt="" />
Avoid adding height or width features to the placeholder image to prevent the images in the gallery from getting squeezed or stretched to the same size.
The JavaScript Function:
The JavaScript function should be placed in the <head> of the document or in an external file. You can call the function showPic
function showPic (whichpic)
This function will allow only one parameter and that is whichpic . This leads to the link pointing to whichever picture you wish to display.
The showPic function will be interacting with desc and placeholder by relating to their IDs directly. However ensure that your browser is capable of carrying out the function. You can do it by checking for the availability of document.getElementById :
if (document.getElementById)
Once the browser proves to be capable of carrying out the JavaScript function, substitute the placeholder image by replacing the src value of the placeholder with the href value of the whichpic link.
document.getElementById('placeholder').src = whichpic.href;
During the same time substitute the text in the desc paragraph. You can use proprietary JavaScript such as innerHTML. There is also a cross-browser solution available in the form of childNodes[0].nodeValue. This will be the text inside the element.
Replace the desc text with the text from the whichpic link:
document.getElementById('desc') »
.childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
However replacing the desc text with the content of the title attribute from the whichpic link is an even better option
document.getElementById('desc') »
.childNodes[0].nodeValue = whichpic.title;
Test for the existence of a title attribute. If it's present then use that text. Otherwise, use the link text:
if (whichpic.title) {
document.getElementById('desc') »
.childNodes[0].nodeValue = whichpic.title;
} else {
document.getElementById('desc') »
.childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
}
Finally ensure that the whichpic link isn't actually followed by returning false :
return false;
If the browser does not understand document.getElementById then make sure the link is followed by true .
This is how the finished function will look like:
<script type="text/javascript" language="javascript">
function showPic (whichpic) {
if (document.getElementById) {
document.getElementById('placeholder') »
.src = whichpic.href;
if (whichpic.title) {
document.getElementById('desc') »
.childNodes[0].nodeValue = whichpic.title;
} else {
document.getElementById('desc') »
.childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
}
return false;
} else {
return true;
}
}
</script>
Call the function:
To see the result you have to call the function. Each of the links should be assigned a characteristic ID to pass a value for whichpic. However, it is easy to give the value this to whichpic, giving whihcpic the value of “this element calling the function”
You can also use onclick event handler or onkeypress for those who wish to navigate through the keyboard. As the showPic function determines whether the link is actually followed or not, ensure the action of clicking the link to return whatever the function returns. If the function returns false , it means the link isn't followed. You can do this by using the
onclick=”return showpic (this)
<ul>
<li><a onclick="return showPic(this)" href ="images/sun.jpg" title="A sun on the horizion">the sun</a></li>
<li><a onclick="return showPic(this)" href=" images/landscape.jpg" title="Beautiful landscape">the landscape</a></li>
<li><a onclick="return showPic(this)" href=" images/girl.jpg" title="Potrait of a girl">a girl</a></li>
<li><a onclick="return showPic(this)" href ="images/vase.jpg" title="Flower vase">the vase</a></li>
</ul>
This way you can have a simple JavaScript image gallery. The older browsers can follow the links and see the images. It works well on IE5+ and Netscape 6+ on Windows and Mac. It also works in Safari and all the various other browsers.
This article has been compiled by the content development team at Pegasus InfoCorp which pulls subject matter specialists from different work domains. They can be contacted through the Pegasus InfoCorp website at info@pegasusinfocorp.com. Pegasus InfoCorp is an India based web design, web development and online/ offline software development company. Please visit http://www.pegasusinfocorp.com to read more articles and know more about us!
Other companies and organizations are welcome to reprint this article
on their websites provided the following conditions are met.