dougv.com « Doug Vanderweide

Showing A Larger Image From A Thumbnail OnClick Via JavaScript / DOM

Recently asked on Yahoo! Answers:

What Javascript to use to click on an image and make it appear larger in the middle of the page?

I want to display my artwork on my webpage. I want to have it so on the left hand side are small images of my work and in the middle will be a large area. When the viewer clicks on the small image (or rolls over it), the large image of the piece will be in the large box in the middle. What javascript code should I use?

This is DOM manipulation in its simplest and purest form: Change an IMG tag’s source, alt and title attributes based on clicking a thumbnail.

I’ll make two demos: One that includes the thumbnails on the same page as the image to be displayed, and another that places the thumbnails in an IFRAME, so scrolling between the thumbnail and the full-sized image isn’t an issue.

Example 1: Thumbnails On The Same Page

We start, as always, with the HTML. Key to it are an IMG element that we will change, to show a full-sized image when a thumbnail is clicked; we will ID that element as currentImg.

We also need all the thumbnails linked to the same JavaScript function, but passing the name of the full-sized image to the function. More on that in a moment.

Notice that I am using DIV elements to lay out these items side-by-side: Thumbs to the left, big image to the right.

<div id="mainContainer">
	<div id="leftNav">
		<img src="images/bridget_moynahan_00_tn.jpg" alt="bridget_moynahan_00.jpg" title="bridget_moynahan_00.jpg" onclick="showImage('bridget_moynahan_00.jpg');" />
		<br />
		<img src="images/bridget_moynahan_01_tn.jpg" alt="bridget_moynahan_01.jpg" title="bridget_moynahan_01.jpg" onclick="showImage('bridget_moynahan_01.jpg');" />
		<br />
		<img src="images/bridget_moynahan_02_tn.jpg" alt="bridget_moynahan_02.jpg" title="bridget_moynahan_02.jpg" onclick="showImage('bridget_moynahan_02.jpg');" />
		<br />
		<img src="images/bridget_moynahan_03_tn.jpg" alt="bridget_moynahan_03.jpg" title="bridget_moynahan_03.jpg" onclick="showImage('bridget_moynahan_03.jpg');" />
		<br />
		<img src="images/bridget_moynahan_04_tn.jpg" alt="bridget_moynahan_04.jpg" title="bridget_moynahan_04.jpg" onclick="showImage('bridget_moynahan_04.jpg');" />
		<br />
		<img src="images/bridget_moynahan_05_tn.jpg" alt="bridget_moynahan_05.jpg" title="bridget_moynahan_05.jpg" onclick="showImage('bridget_moynahan_05.jpg');" />
	</div>
	<div id="rightDisplay">
		<img id="currentImg" src="images/bridget_moynahan_00.jpg" alt="bridget_moynahan_00.jpg" title="bridget_moynahan_00.jpg" />
	</div>
</div>

As you can see, we set the href attribute of each image’s attending hyperlink to be #, which as used here is basically shorthand for “the top of the page.” We could point this to any named anchor on the page, if we prefer, such as #image, #right, whatever.

Notice that the onclick event for the hyperlinks are all set to use a function named showImage(), and that each thumbnail has, as an argument for that function, the name of the image we want displayed as a full-sized image when the thumbnail is clicked.

Let’s see the JavaScript showImage function, then. To begin, we declare the function, set a variable to reference the currentImg element on our page, and set the relative HTTP path to where we have stored our images. (Also note that the path variable ends with a forward slash; that’s required by this script.)

Then, we manufacture the path to the image by adding the image name we want to show to the path variable we just declared.

function showImage(imgName) {
	var curImage = document.getElementById('currentImg');
	var thePath = 'images/';
	var theSource = thePath + imgName;

Since we now have a full path to the image, changing the source of the currentImg element is as simple as telling JavaScript to assign it a new src attribute. And, so that we can get a tool tip telling us the name of the full-sized image when we mouse over it, we also change the title and alt attributes.

	curImage.src = theSource;
	curImage.alt = imgName;
	curImage.title = imgName;
}

And that’s all there is to it. You can see a working example of this code here:

http://www.dougv.com/demo/js_larger_image/index.html

Example 2: With Thumbnails In An IFRAME

The problem with Example 1 is that if you have a lot of thumbnails, layout and scrolling may be an issue. So, what if you put your thumbnails in an IFRAME, to reduce scrolling problems? Would this still work?

Yes, it will, with some minor modifications.

First, we need to place the JavaScript on the IFRAME page, not the parent page. That is, the JavaScript goes on the page that has the thumbnails, not the page that has the big image. That’s because the thumbnails are on the thumbnails page; thus, when you click on them, only the thumbnail page itself can listen for that event and do something about it.

Next, we need to make one minor change to the showImage() function: We have to change the image variable to reference the big image page, not the thumbnail page on which this script resides.

We do that by simply adding the word “parent,” which tells JavaScript that the tag it’s looking for is on the page that displays the IFRAME, not the IFRAME page itself.

var curImage = parent.document.getElementById('currentImg');

With those minor changes, we’re ready to go!

You can see this script in action here:

http://www.dougv.com/demo/js_larger_image/iframe.html

Addendum: January 26, 2008

Asked in a comment:

How can you get the title to display on the page as well below the image?

Just add a DIV to your HTML, wherever you want the title to appear:

<div id="imagetitle"></div>

Then add these two lines to the showImage() JavaScript function, at the end (just before the closing bracket):

var titleDiv = document.getElementById('imagetitle');
titleDiv.innerHTML = imgName;

Update, January 29, 2010: I have updated the scripts to remove the use of anchor (link) elements. Since all major browsers support the onclick event for images, links aren’t necessary. I have also changed the license terms to GNU GPL, and deleted the download code: Just save the HTML.