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

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.

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://demo.dougv.com/js_larger_image/index.html

Example 2: With Thumbnails In An IFRAME

Update, 19 December 2013: It makes more sense, these days, to simply put your thumbnails in a div, set the width and height of that div to be what you need, then use CSS overflow to add scroll bars as needed. When this article was written, that wasn’t really an option. This copy is being retained for search engine purposes. And it does still work, but isn’t ideal in terms of SEO.

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://demo.dougv.com/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;

I distribute code under the GNU GPL. See Copyright & Attribution for details.

16 Comments

  1. Hello ,
    Its very amazing tutorial. It had very helpful to me also. But I want to know that if all the images will bind from database then how the script will work? I am working on asp.net c# project. Can you give me some suggestions?

  2. @Zalak: Since I can’t see your source code — and therefore, have no idea how you are binding images, or even to what you are binding them (GridView? Repeater? Panel? ViewModel?) — I can’t tell you how this will work. All I can say is, use the same function that binds the images to also bind the onclick event.

  3. Great code! very helpful!
    I was wondering if its possible to use the onmouseout in this example to display the default background color of the div backwhen moving out the image?!

  4. YW, @Melissa. Glad your issues got worked out.

    A note about your earlier inquiries: When you have a coding problem, generally speaking it’s important to show the code you have.

    In the case of HTML / CSS / JavaScript, you can create a CodePen to show what you have, and whomever is helping you can see what you are trying to do, identify what’s wrong and fix it right there. Alternatively, you can use Pastebin or a GitHub Gist.

    The reason I didn’t get back to you was because you didn’t provide your code. FYI.

  5. Helpful and great code but I was wondering if it is possible to bring the image from certain direction

    Thanks for your code

Leave a Reply

  • Check out the Commenting Guidelines before commenting, please!
  • Want to share code? Please put it into a GitHub Gist, CodePen or pastebin and link to that in your comment.
  • Just have a line or two of markup? Wrap them in an appropriate SyntaxHighlighter Evolved shortcode for your programming language, please!