Hi all,
A little while ago someone created a gallery for me, with thumbnails, it would swap the main image for the thumbnail, so no picture was displayed twice (both as thumb and main image) at the same time.
I now need to add some captions to the main image but can't figure out how to do it, I want it to swap over a div containing both picture and caption. I don't want the small thumbnails beneath to show their captions though, only the main image is to do that.
The original code I have is below, any help would be really appreciated
A little while ago someone created a gallery for me, with thumbnails, it would swap the main image for the thumbnail, so no picture was displayed twice (both as thumb and main image) at the same time.
I now need to add some captions to the main image but can't figure out how to do it, I want it to swap over a div containing both picture and caption. I don't want the small thumbnails beneath to show their captions though, only the main image is to do that.
The original code I have is below, any help would be really appreciated
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html>
<head>
<title>None</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
var thumbProportion = .2 // thumbnails are 20% of their full size;
var swapImgClass = "";
var fullSizeImg = "";
var IE = false;
if (navigator.appName == "Microsoft Internet Explorer"){IE = true;}
function swapImg(nImg){
var thumbImg = nImg.getElementsByTagName('img')[0];
var thumbImgAlt = thumbImg.alt;
var origFullWidth = fullSizeImg.width;
var origFullHeight = fullSizeImg.height;
var tempImgHolder = fullSizeImg.src;
var origFullAlt = fullSizeImg.alt;
fullSizeImg.src = thumbImg.src;
thumbImg.src = tempImgHolder;
swapImgClass.style.width = fullSizeImg.width + "px";
thumbImg.style.width = Math.round(origFullWidth * thumbProportion) + "px";
thumbImg.style.height = Math.round(origFullHeight * thumbProportion) + "px";
thumbImg.alt = origFullAlt;
thumbImg.title = origFullAlt;
fullSizeImg.alt = thumbImgAlt;
fullSizeImg.title = thumbImgAlt;
}
function init(){
fullSizeImg = document.getElementById('fullSizeImg').getElementsByTagName('img')[0];
var nGallery = document.getElementById("photoGallery").getElementsByTagName("a");
for (i=0; i<nGallery.length; i++)
{
nGallery[i].onclick = function()
{
swapImg(this);
return false;
}
nGallery[i].href = "#";
}
IE ? nRule = document.styleSheets[0].rules : nRule = document.styleSheets[0].cssRules;
for (i=0; i<nRule.length; i++)
{
if (nRule[i].selectorText == ".swapImg")
{
swapImgClass = nRule[i];
nRule[i].style.width = fullSizeImg.width + "px";
}
}
}
IE ? attachEvent('onload', init, false) : addEventListener('load', init, false);
</script>
<style type="text/css">
body {height: 1200px; background-color: #f0fff0;}
.swapImg {margin-left: auto; margin-right: auto; margin-top: 15px; border: 1px solid black;}
.galleryContainer {position: fixed; bottom: 5px; left: 3%; height: auto; width: 95%;
background-color: #f6eabc; border: 1px solid black; text-align: center;}
.galleryContainer img {border: 2px solid blue; margin-left: 15px; margin-top: 5px; margin-bottom: 0px;}
</style>
<!--[if gte IE 5.5]>
<![if lt IE 7]>
<style type="text/css">
.galleryContainer {position: absolute;
top: expression(document.documentElement.scrollTop +
document.documentElement.clientHeight - this.clientHeight - 5 + "px");}
</style>
<![endif]
<![endif]-->
</head>
<body>
<div id="fullSizeImg" class="swapImg">
<img src="./images/CB1.jpg" alt="First Image Description" title="First Image Description">
</div>
<div id="photoGallery" class="galleryContainer">
<a href="./images/CB2.jpg"><img src="images/CB2.jpg" width="64" height="96" alt="Second Image Description" title="Second Image Description"></a>
<a href="./images/CB3.jpg"><img src="images/CB3.jpg" width="128" height="85" alt="Third Image Description" title="Third Image Description"></a>
<a href="./images/CB4.jpg"><img src="images/CB4.jpg" width="64" height="96" alt="Fourth Image Description" title="Fourth Image Description"></a>
<a href="./images/CB5.jpg"><img src="images/CB5.jpg" width="128" height="77" alt="Fifth Image Description" title="Fifth Image Description"></a>
</div>
</body>
</html>