Yesterday I finished work on a site that required me to setup a thumbnail gallery. When you click a thumbnail, the main image on the page changes and the text underneath that image changes.

I had worked on the image swap previously, so the biggest question was “How am I going to get the text to switch?”

I poked around a bit and found a solution that works for me.

Step 1: Insert this section of code into the <head> section of your page. Really all you need to know is that it gets the job done.

<script type=”text/JavaScript”>
<!–
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf(”?”))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_setTextOfTextfield(objName,x,newText) { //v3.0
var obj = MM_findObj(objName); if (obj) obj.innerHTML = newText;
}
//–>
</script>

Step 2: In the main section of your page, create a <div> tag and give that <div> tag an id. If you insert text into your <div> tag, that will be the the text that displays when the page loads, but that text will change when the user makes a selection.

<div id=”MainText”>This is the beginning Text</div>

Step 3: Setup your links. Each link will have some Javascript in it, to tell it what to do with the <div> area.

<a href=”#” onClick=”MM_setTextOfTextfield(’MainText’,”,’This is the text that appears when the link is clicked’)”>Click Here</a>

Javascript, Web Development | August 30, 2007, 8:20 am | Get RSS Feed | No Comments »

I recently had a couple different clients request that I create a gallery with an image swap. It’s convenient because I could put the functions to use on more than site. I wrote below about how to implement an image swap. Here is an example for expecting mothers.

As you’ll see, the thumbnails are contained in the right-hand column. Click a thumbnail and that image pops up in the main window. I also added a feature so that the text that appears under the main image changes whenever you select a different thumbnail.

Javascript, Web Development | August 30, 2007, 12:08 am | Get RSS Feed | No Comments »

This code has proven to be useful many times in the last few weeks. Clients come to me asking for different type of “galleries” for their images. This is the standard code that I use:

Step 1: Choose the image / space that will change, to display different images. You need to use a name tag inside of this image tag.

<img src=”images/1.jpg” name=”MainImage”>

Step 2: Setup your links. Each link needs to have an onClick tag. You can setup as many links as you like. You can also use thumbnails of the images as the links, since you may not want to use text.

<a href=”#” onClick=”document.MainImage.src=’images/2.jpg’;”>Click Here</a>

I will post a link, once I have a working example for one of my clients.

Javascript, Web Development | August 29, 2007, 7:17 am | Get RSS Feed | No Comments »