News Contact
Web Development Design UK USA India, Web Software Applications Development Programming Contact Custom Web Software Developers Programming Company India Contact Web Software Development Company Call Request For Web Software Development Programming RFI RFP RFQ Web Development Design UK USA India, Web Software Applications Development Programming Contact website development and web design company, advanced portal development UK USA Site Map: Internet applications to discover your NET potential

mage gallery using Java Script

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.

<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>

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;

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)


<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>


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 Pegasus InfoCorp is an India based web design, web development and online/ offline software development company. Please visit 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.

  • The article is not changed in any manner
  • The article is copied as is in its entirety (including back links to the Pegasus InfoCorp website).
  • The company/ organization reprinting the article agrees to defend, indemnify and hold harmless Pegasus InfoCorp, its employees, directors, officers, agents, partners and their successors and assigns from and against any and all liabilities, damages, losses, costs and expenses, including attorney's fees, caused by or arising out of claims based upon the use of the article, including any claim of libel, defamation, violation of rights of privacy or publicity, loss of service by subscribers and infringement of intellectual property or other rights.
flash from function java script , date function java script time , function java math script , function java replace script,false java script , findobj java mm script , history java script , java script string , form java script submit , java onclick script , java script timer , dummy java script
string , function java return script , built function in java script , function java script statement switch , function java Articles
 script validation , function in java script statement switch , function java script wait , 
java script definitive guide java script , either have java script turned , download java script , free java script , Blogs
download free java script , java script tutorial , 1 e java ppk script voice , enable java script , guide java quickstart India Info
script visual web wide world , java learning script , java script turn , 0 java script void , enable java please script ,
java programming script , cart java script shopping , java menu script , java location.reload script , html java script Home
java learn script , code java script , cleanapostrophe java language script script script , expand java script , beginning Featured Clients
java script , enabled have java must script , error java script , calendar java script , book java script , java script show  Why Choose Pegasus ?
slide , download free java license script , array java script , 204 java practivity script , guide java script , code free  Services
java script , java reference script , free java menu script , client i.e java remove script scripting side , java pro pro Solutions
script technique , example java script , handle java script will , hover java pushin script , developer java professional Contact Us
script web , bible java script , java script , function java script , debugger java script , dojo java script , Site Map
have java script turned , java popup script , java redirect script , alert java script , java script update , form java
script , java off script turned , book cook dhtml java script , java page script this use , java script tag , game java Rupali
script , java open script window , close java script window , java script source , download file java script , java pop Port of Mundra
script up window , down drop java menu script , editor java script , date java script , java script void , developer guide  Aus RFID
 java professional professional script web wrox , developer java library phrasebook script tm , form java script validation , Planet Bombay
java rewrite script , java language script script , enabling java script , install java script , java popup script window , Marlex
java script , help java script , cookie java script , clock java script , code java library script , java script sudoku , ICUIL
java script window , fusker java script , ajax java script , calculator java mortgage script , java print script , java loop Steinmetz
script , hideloader java script , java movie require script , dowload java script , enabled java script , java script  Smart Fashions
Read More
© 2007, Pegasus InfoCorp Pvt. Ltd. All Rights Reserved. Install Shockwave Flash™