This demonstrates how to display a large version of an image selected from a thumbnail on the same page, by using javascript to change the image. But if javascript is not available, then panic ye not!!! as some nifty PHP code will reopen the page and display the image selected. It was inspired by a question on the alt.html newsgroup where the poster wanted to do something like this, but without having to make a page for each picture. It's tested in IE6, Netscape 4.7 and 6 (don't alter alt text), Mozilla (can't remember what version I have, but pretty old), Opera 5, and even Xemacs(!). Click, prod, or otherwise select the thumbnails below to see it in action, then view the code below to see how it works.
Incidentally, the photographs are of Pendragon live at the Oakwood Centre, Rotherham, performing at the Classic Rock Society Awards Night, 8 December 2001. All photographs are Copyright © Nigel Moss 2001. All Rights Reserved.
|
|
|
|
This first bit uses PHP to set up an array of image filenames and alt-texts.
<?PHP
$iname = array( "pend2.jpg",
"pend4.jpg",
"pend5.jpg",
"pend6.jpg",
"pend7.jpg");
$ialt = array( "Pendragon bass player and guitarist on stage",
"Pendragon guitarist in mid-solo",
"Pendragon guitarist. Keyboard player in background",
"Pendragon bass player on stage",
"Pendragon guitarist at mic. Bass player in background");
Then we check to see if pid has been set. If Javascript is not available to the end-user, then the thumbnail links will open the same page, but with pid set to the id number of the picture requested. If pid has been set, then the initial filename and alternative text for the main image will be that of the picture requested, otherwise it will be the default, initial image.
if (isset($_GET['pid'])) {
$startimg = $iname[$_GET['pid']];
$startalt = $ialt[$_GET['pid']];
}
else {
$startimg = $iname[0];
$startalt = $ialt[0];
}
?>
Now we start the javascript, although the first part of the script is actually written by PHP to create two javascript arrays - the first is an array of the image filenames and the second is an array of the image's alternative texts. I used PHP to do this so that the values would be the same as that used in the PHP code above. You could of course hand-write the arrays in javascript, but only if you want to make more work for yourself, both now and in the future.
<script type="text/javascript">
<!-- Hide
<?
print("var imgname = new Array(\"$iname[0]\", \"$iname[1]\", \"$iname[2]\", \"$iname[3]\", \"$iname[4]\");\n");
print("var imgalt = new Array(\"$ialt[0]\", \"$ialt[1]\", \"$ialt[2]\", \"$ialt[3]\", \"$ialt[4]\");\n");
?>
And now we have the javascript function to swap the main image. We pass the array index to this function and set the image's src and alt from the javascript array defined above.
function swapImage(imgref) {
document.images.mainimg.src = imgname[imgref];
document.images.mainimg.alt = imgalt[imgref];
}
// Dunhidin -->
</script>
First, we use PHP to write out the img element, using the default start image src and alt set in the PHP code above.
<?
print("<p><img src=\"$startimg\" alt=\"$startalt\" name=\"mainimg\" width=\"400\" height=\"300\"></p>\n");
?>
Now we set up the thumbnail links. The links will reference the page index.php (this page) with pid set to the the array value of the image being requested. The onclick handler will fire the javascript function swapImage defined above and then return false to stop the file referenced in href being opened. If javascript is not available to the end user, then none of the code in the onclick handler will take place, and the file in href will be opened as normal, so the page will reopen and the requested image will be displayed. I've used PHP to write the img elements, so I can use the values defined in the PHP arrays to write out the src and alt, with the subdirectory 'thmb' placed in front of the filename.
<p>
<a href="index.php?pid=0" onclick="swapImage(0); return false;"><? print("<img src=\"thmb/$iname[0]\" alt=\"$ialt[0]\" width=\"125\" height=\"94\">"); ?></a> |
<a href="index.php?pid=1" onclick="swapImage(1); return false;"><? print("<img src=\"thmb/$iname[1]\" alt=\"$ialt[1]\" width=\"125\" height=\"94\">"); ?></a> |
<a href="index.php?pid=2" onclick="swapImage(2); return false;"><? print("<img src=\"thmb/$iname[2]\" alt=\"$ialt[2]\" width=\"125\" height=\"94\">"); ?></a> |
<a href="index.php?pid=3" onclick="swapImage(3); return false;"><? print("<img src=\"thmb/$iname[3]\" alt=\"$ialt[3]\" width=\"125\" height=\"94\">"); ?></a> |
<a href="index.php?pid=4" onclick="swapImage(4); return false;"><? print("<img src=\"thmb/$iname[4]\" alt=\"$ialt[4]\" width=\"125\" height=\"94\">"); ?></a>
</p>
And that's it! Some of the code could be made more elegant, and there are certainly better ways of doing this - especially if it is to be used for a large-scale application, but the basics are all here. Any comments, please email me.
View the full source code as a text file (without all the code explanation stuff) and feel free to use / adapt it as you wish. I don't ask anything more than a credit and maybe a link (to this page, or my homepage), which isn't a great deal to ask!