I recently created a site with multiple links to swap images and text. Not only did the link have to change the image but it had to pass variables to other links so they could change the Large image and text. This got fairly complicated. So I thought I would put it out here for posterity in case anyone ever needs it.

First the HTML

Create a large image holder with a spot for two “alternate thumbnail images” somewhere on your page. The alternate images might be closeups or variations of the main large image. When clicked the alternate thumbnails will swap out the large image. You will be using the title value to control image and text swaps, so you should have 2 subdirectories in your Images directory.
largeimages, thumbnails. The thumbnails and images must have the same name.


Main Image:

Alternate Images:

link1
link2
link3


And finally Create a spot for the swappable text

Some temporary text here! a caption or paragraph perhaps.

Now for some Javascript:


//Define an object for the image text.
var imagetxt = new Object();
imagetxt['image1']= 'some interesting caption or information about image 1';
imagetxt['image2']= 'some interesting caption or information about image 2';
imagetxt['image3']= 'some interesting caption or information about image 3';

// FUNCTIONS
function swapImages(iname){
document.largeimg.src='images/collections/'+iname+'.jpg';
document.addl1.src='images/thumbs/'+iname+'_alt1.jpg';
document.addl2.src='images/thumbs/'+iname+'_alt2.jpg';
document.largeimg.title= iname;
document.addl1.title= iname;
document.addl2.title= iname;

var e=document.getElementById("imgtext");
e.innerHTML=imgtxt[document.largeimg.title];
}

//Swaps images for Addtional Images

function swapAddl1(){
//get the source of the first alternate image.
x= document.getElementById('addl1').src;
//split the path into an array
y= x.split("/");
//swap to the imagename portion of the path array 3 4 5 etc...
document.largeimg.src='imagespath/'+y[5];
document.largeimg.title= 'Image# '+y[5];
// swap text
var e=document.getElementById("imgtext");
e.innerHTML=imgtxt[document.addl1.title];
}

//repeat for 2nd alternate image
function swapAddl2(){
x= document.getElementById('addl2').src;
y= x.split("/");
document.largeimg.src='images/collections/'+y[5];
document.largeimg.title= 'Item# '+y[5];
// swap text
var e=document.getElementById("imgtext");//if(!e)return;
e.innerHTML=imgtxt[document.addl2.title];
}

// INITIALIZE ON WINDOW LOAD
function init(){

//load text
var e=document.getElementById("imgtext");
e.innerHTML=imgtxt[document.largeimg.title];

}
window.onload= init;


I put the javascript in its own file and call it in the header of my html page. By using careful naming conventions for large images, alternate images, and thumbnails I can create as many links and sublinks to swap the image and text. If you plan to do more than 10 main links, it may be better to use a database solution.

Note if the main images do not always have Alternate images you can pass an array swapimages(main, alt1, alt2, txt)

This entry was posted on Saturday, November 11th, 2006 at 3:00 pm and is filed under Web Development, Code. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.