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

Recently asked on Yahoo! Answers:

Showing a Larger picture from a Thumbnail – How to include the Title?
I have followed the steps from http://www.dougv.com/2007/02/07/sho…
using the iFrame version, but cannot get the image on click to display the title used in the img tag.

i.e

<img src="images/image_02_tn.jpg" alt="image_02.jpg" title="image name" />

Using the Addendum: information posted the title that gets displayed is ‘image_02.jpg’ when I want ‘Image Name’ to be displayed.

Anyone know the best way to do this?

A few changes to the original script take care of this request quite handily, and it also allows me the opportunity to make some improvements to the original script:

  • Modern Web browsers support the onclick event for any DOM element, so there’s no need to assign the onclick event to a hyperlink; we can add it directly to the thumbnails.
  • We should preload the full-size images so that there isn’t a significant delay between when the thumbnails have been clicked and the full-size image shows.
  • To allow the script to pull images from any location, I’ve removed the part of the script that sets a path and concatenates the relevant image to that path.

Let’s get to it. As always, I will have a working demo and code you can download at the end of this entry.

Step 1: The preLoadImages() Function

Update, 19 December 2013: This method of preloading images doesn’t actually work. Instead, see the post “Preloading Images With JavaScript” for the right way to do it. I’m retaining the text below for SEO purposes.

A image preloader is easy to accomplish. We simply create a JavaScript function that makes, for each image passed to the function, a new Image() object, and assigns to that object’s src attribute the URL of the image we want preloaded.

function preLoadImages() {
	var tmp = new Array();
	for(var i = 0; i < attributes.length; i++) {
		tmp[i] = new Image();
		tmp[i].src = attributes[i];
	}
}

We also alter the BODY tag in our page’s HTML to call the function, with each full-sized image listed as an argument:

<body onload="preLoadImages('images/jessica_biel_01.jpg', 'images/jessica_biel_02.jpg', 'images/jessica_biel_03.jpg', 'images/jessica_biel_04.jpg', 'images/jessica_biel_05.jpg', 'images/jessica_biel_06.jpg', 'images/jessica_biel_07.jpg', 'images/jessica_biel_08.jpg');">

If you use the IFRAME version of this script, this function can go on either the page that shows the full-sized image or the thumbnail page; I prefer using the full-size image page, just to keep things associated properly (the images appear on that page, so that page should preload the images).

Step 2: Changes To The HTML

For our new text area to work, we need to make some changes to the HTML on the page.

As I noted above, we can get rid of the hyperlinks surrounding the thumbnails. We’re also going to change the showImage() function to accept two arguments, rather than one: The first argument will be the path to the image we want to show, and the second argument will be the text we want to have displayed under the image.

Finally, we need to add a DIV where we will display the text associated with the image.

<img src="images/jessica_biel_09_tn.jpg" alt="images/jessica_biel_09_tn.jpg" title="images/jessica_biel_09_tn.jpg" onclick="showImage('images/jessica_biel_09.jpg', 'And even if she sits in the bathroom sink for no apparent reason.');" />

<div id="rightText">
	This is where the text associated with each image will appear.
</div>

Step 3: Changes To The showImage() Function

As noted above, the showImage() JavaScript function now takes two arguments: the full path to the image we want to display full-sized when the thumbnail is clicked, and the text we want to have appear alongside that image.

Our function now works as follows:

  1. We get a reference to the full-sized image using getElementById()
  2. We reference the new text display DIV, also via getElementById()
  3. We establish the source, alt and title attributes of the full-sized image to be the path provided by the first argument of the function.
  4. We set the innerHTML of the text display DIV to be the text passed as the second argument of the function.
function showImage(imgName, imgText) {
	var curImage = document.getElementById('currentImg');
	var textDiv = document.getElementById('rightText');

	curImage.src = imgName;
	curImage.alt = imgName;
	curImage.title = imgName;
	textDiv.innerHTML = imgText;
}

Some usage notes:

  • Any HTML you pass as the second argument of the function will display as HTML in the text DIV. For example, if you use a STRONG tag in the DIV, whatever is inside the STRONG tags will be bold.
  • You need to escape all single-quotes in your HTML function calls and replace all double-quotes with the HTML entity for double-quotes. In fact, it makes a lot of sense to replace all special characters with their HTML entities.
<!-- escape or replace your quotes! -->
<img src="images/jessica_biel_02_tn.jpg" alt="images/jessica_biel_02_tn.jpg" title="images/jessica_biel_02_tn.jpg" onclick="showImage('images/jessica_biel_02.jpg', 'If you use quotes in your text, it's important to escape them with a backslash.');" />
<br />
<img src="images/jessica_biel_03_tn.jpg" alt="images/jessica_biel_03_tn.jpg" title="images/jessica_biel_03_tn.jpg" onclick="showImage('images/jessica_biel_03.jpg', 'If you are going to use double-quotes in your text, you need to use the HTML entity &amp;quot;, or your script will &quot;error out&quot;.');" />
<br />

<!-- replace your HTML entities! -->
<img src="images/jessica_biel_07_tn.jpg" alt="images/jessica_biel_07_tn.jpg" title="images/jessica_biel_07_tn.jpg" onclick="showImage('images/jessica_biel_07.jpg', 'In fact, it makes a lot of sense to use entities for everything you include in the call to the showImage function's imgText argument.');" />

And that’s it. You can see working demos here:

Single-Page Version

Thumbnails In An IFrame Version

You can download the code here: Showing A Larger Image From A Thumbnail OnClick Via JavaScript / DOM Revisited demo code

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

Leave a Reply