PDA

View Full Version : Changing captions with pictures, captions not working



HughbertD
Aug 20th, 2009, 03:15 PM
Hi all,

For this page here:
http://morrish.juiceserver.co.uk/plo...=136&prop_id=9

I have the following code for the photo gallery:



var thumbProportion = .17 // thumbnails are 32% of their full size;
var IE = false;
if (navigator.appName == "Microsoft Internet Explorer"){IE = true;}

function swapImg(nImg,nSwapImgClass,nFullSizeImg,nCaption){

var thumbImg = nImg;
var thumbImgAlt = thumbImg.alt;
var origFullWidth = nFullSizeImg.width;
var origFullHeight = nFullSizeImg.height;
var tempImgHolder = nFullSizeImg.src;
var origFullAlt = nFullSizeImg.alt;
nFullSizeImg.src = thumbImg.src;
thumbImg.src = tempImgHolder;
nSwapImgClass.style.width = nFullSizeImg.width + "px";
thumbImg.style.width = Math.round(origFullWidth * thumbProportion) + "px";
thumbImg.style.height = Math.round(origFullHeight * thumbProportion) + "px";
thumbImg.alt = origFullAlt;
thumbImg.title = origFullAlt;
nFullSizeImg.alt = thumbImgAlt;
nFullSizeImg.title = thumbImgAlt;
nCaption.firstChild.data = thumbImgAlt;
}

function init(){

var nImg = document.getElementById('fullSizeContainer');
//if (!nImg) return
var fullSizeImg = nImg.getElementsByTagName('img')[0];
//if (!fullSizeImg) return
nCaption = nImg.getElementsByTagName('div')[0];

IE ? nRule = document.styleSheets[3].rules : nRule = document.styleSheets[3].cssRules;
for (i=0; i<nRule.length; i++)
{
if (nRule[i].selectorText == ".swapImg")
{
var swapImgClass = nRule[i];
nRule[i].style.width = fullSizeImg.width + "px";
}
}
//var nGall = document.getElementById('photoGallery');
//var nGallery = nGall.getElementsByTagName('a');
var nGallery = document.getElementById("photoGallery").getElementsByTagName("a");
for (i=0; i<nGallery.length; i++)
{
nGallery[i].onclick = function()
{
swapImg(this.firstChild,swapImgClass,fullSizeImg);
nCaption.innerHTML = this.firstChild.alt;
return false;
}
nGallery[i].href = "#";
}
}

IE ? attachEvent('onload', init) : addEventListener('load', init, false);



The pictures change fine, but I can't get the captions to change with them.

Any help anyone can give would be massively appreciated

12 Pack Mack
Aug 20th, 2009, 05:02 PM
HughbertD:

I gave you this code some weeks ago. You didn't post the associated HTML so it's impossible to know what changes you made.

The best I can do is post another copy of the code. Maybe you can compare it to the markup you are using and discover the error that way.


Tested in IE and FF.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<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 IE = false;
if (navigator.appName == "Microsoft Internet Explorer"){IE = true;}

function swapImg(nImg,nSwapImgClass,nFullSizeImg){

var thumbImg = nImg;
var thumbImgAlt = thumbImg.alt;
var origFullWidth = nFullSizeImg.width;
var origFullHeight = nFullSizeImg.height;
var tempImgHolder = nFullSizeImg.src;
var origFullAlt = nFullSizeImg.alt;
nFullSizeImg.src = thumbImg.src;
thumbImg.src = tempImgHolder;
nSwapImgClass.style.width = nFullSizeImg.width + "px";
thumbImg.style.width = Math.round(origFullWidth * thumbProportion) + "px";
thumbImg.style.height = Math.round(origFullHeight * thumbProportion) + "px";
thumbImg.alt = origFullAlt;
thumbImg.title = origFullAlt;
nFullSizeImg.alt = thumbImgAlt;
nFullSizeImg.title = thumbImgAlt;
nCaption.firstChild.data = thumbImgAlt;
}

function init(){

var nImg = document.getElementById('fullSizeContainer');
var fullSizeImg = nImg.getElementsByTagName('img')[0];
nCaption = nImg.getElementsByTagName('div')[0];

/*

if you use external .css files, place the two <style> sections below
as the last two <link> tags in your list, in that order. .styleSheets.length-2 for IE references
the last .css file, and .styleSheets.length-1 for FF and other browsers
references the last .css file

*/

IE ? nRule = document.styleSheets[document.styleSheets.length-2].rules
: nRule = document.styleSheets[document.styleSheets.length-1].cssRules;


for (i=0; i<nRule.length; i++)
{
if (nRule[i].selectorText == ".swapImg")
{
var swapImgClass = nRule[i];
nRule[i].style.width = fullSizeImg.width + "px";
}
}
var nGallery = document.getElementById("photoGallery").getElementsByTagName("a");
for (i=0; i<nGallery.length; i++)
{
nGallery[i].onclick = function()
{
swapImg(this.firstChild,swapImgClass,fullSizeImg);
return false;
}
nGallery[i].href = "#";
}
}

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: 5px; border: 1px solid black;}
.swapImg img {margin-bottom: -4px;}
.galleryContainer {position: fixed; bottom: 5px; left: 3%; height: auto; width: 95%;
background-color: #ffffe0; border: 1px solid black; text-align: center;}
.galleryContainer img {border: 2px solid blue; margin-left: 15px; margin-top: 5px; margin-bottom: 2px;}
.caption {font-family: tahoma; font-size: 14pt; text-align: center; color: #4169e1;
background-color: #ffffe0; padding-top: 1px; padding-bottom: 1px;}

</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="fullSizeContainer" class="swapImg">
<img src="./images/CB1.jpg" alt="First Image Description" title="First Image Description">
<div class="caption">First Image Description</div>
</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>

HughbertD
Aug 21st, 2009, 09:05 AM
Hi,

It did indeed work at some point, and I'm not sure why it has stopped working.

This link:
http://morrish.juiceserver.co.uk/plot_index.php?plot_id=136&prop_id=9

Should show you the HTML markup, if there is anything you can think of I would greatly appreciate it

12 Pack Mack
Aug 21st, 2009, 11:57 AM
HughbertD:

I believe that you changed the order of your external style sheets. I adjusted the code, and it seems to be working again in IE and FF.

Remove this section from your main document:

<!--[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]-->

It's not needed.


Here's the revised code:




var thumbProportion = .2 // thumbnails are 20% of their full size;
var IE = false;
if (navigator.appName == "Microsoft Internet Explorer"){IE = true;}

function swapImg(nImg,nSwapImgClass,nFullSizeImg){

var thumbImg = nImg;
var thumbImgAlt = thumbImg.alt;
var origFullWidth = nFullSizeImg.width;
var origFullHeight = nFullSizeImg.height;
var tempImgHolder = nFullSizeImg.src;
var origFullAlt = nFullSizeImg.alt;
nFullSizeImg.src = thumbImg.src;
thumbImg.src = tempImgHolder;
nSwapImgClass.style.width = nFullSizeImg.width + "px";
thumbImg.style.width = Math.round(origFullWidth * thumbProportion) + "px";
thumbImg.style.height = Math.round(origFullHeight * thumbProportion) + "px";
thumbImg.alt = origFullAlt;
thumbImg.title = origFullAlt;
nFullSizeImg.alt = thumbImgAlt;
nFullSizeImg.title = thumbImgAlt;
nCaption.firstChild.data = thumbImgAlt;
}

function init(){

var nImg = document.getElementById('fullSizeContainer');
var fullSizeImg = nImg.getElementsByTagName('img')[0];
nCaption = nImg.getElementsByTagName('div')[0];

IE ? nRule = document.styleSheets[0].rules
: nRule = document.styleSheets[0].cssRules;


for (i=0; i<nRule.length; i++)
{
if (nRule[i].selectorText == ".swapImg")
{
var swapImgClass = nRule[i];
nRule[i].style.width = fullSizeImg.width + "px";
}
}
var nGallery = document.getElementById("photoGallery").getElementsByTagName("a");
for (i=0; i<nGallery.length; i++)
{
nGallery[i].onclick = function()
{
swapImg(this.firstChild,swapImgClass,fullSizeImg);
return false;
}
nGallery[i].href = "#";
}
}

IE ? attachEvent('onload', init, false) : addEventListener('load', init, false);

HughbertD
Aug 21st, 2009, 03:50 PM
Thanks a million again Mack.

I promise not to break it this time :)