Changing captions with pictures - captions not working

[HughbertD]

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

 

[trollacious]

The link you have posted doesn't work, so I wasn't able to check out the HTML on the page. Without that, I'm just taking a stab in the dark at a possible solution.

Just guessing, this

nCaption.firstChild.data = thumbImgAlt;

might need to be

nCaption.firstChild.innerHTML = thumbImgAlt;

or even

nCaption.innerHTML = thumbImgAlt;

depending on what nCaption is.

Lee

 

[HughbertD]

Ah,

Here is the correct link:

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

I will try those suggestions thanks

 

[trollacious]

Look at the error console on your page when viewed in Firefox. Besides the many warnings from your included JS files, when you click on one of the thumbnails there's an error that nSwapImageClass is undefined on line 15 of your plot_gallery.js file.

You'll have to track down exactly what class is supposed to be referred to and why it isn't using alerts.

Lee