Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 22
  1. #1
    New Coder
    Join Date
    Jul 2009
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Help with change to JS gallery

    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 teh same time.

    I now need to add some captions to the main image but can't figure out how to do it, I thought it would be a simple case of swapping "divs" (containing both caption and picture) rather than just images, however I don't want the caption to appear on the small thumbnails, just to be updated with the large main picture.

    The original code I have is below, any help would be really appreciated

    Code:
    <!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 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>

  • #2
    Regular Coder Amphiluke's Avatar
    Join Date
    Jul 2009
    Posts
    312
    Thanks
    3
    Thanked 89 Times in 89 Posts
    Why not add a div with image caption and set its text to alt (or title) property each time when image is going to change?
    Code:
    <!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 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;
    		document.getElementById("imgCaption").firstChild.nodeValue = thumbImg.alt;
    		/* document.getElementById("imgCaption").firstChild.nodeValue = thumbImg.title; */
    		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;}	
    	#imgCaption {color: #000080; font-size: 1.5em; font-weight: bold; text-align: center;}
    
    </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 Caption" title="First Image Caption">
    			<div id="imgCaption">First Image Caption</div>
    		</div>
    		<div id="photoGallery" class="galleryContainer">
    			<a href="./images/CB2.jpg"><img src="images/CB2.jpg" width="64" height="96" alt="Second Image Caption" title="Second Image Caption"></a>
    			<a href="./images/CB3.jpg"><img src="images/CB3.jpg" width="128" height="85" alt="Third Image Caption" title="Third Image Caption"></a>
    			<a href="./images/CB4.jpg"><img src="images/CB4.jpg" width="64" height="96" alt="Fourth Image Caption" title="Fourth Image Caption"></a>
    			<a href="./images/CB5.jpg"><img src="images/CB5.jpg" width="128" height="77" alt="Fifth Image Caption" title="Fifth Image Caption"></a>
    		</div>
    	</body>
    </html>
    Last edited by Amphiluke; 07-16-2009 at 11:31 AM. Reason: grammar revision
    I am still learning English

  • #3
    New Coder
    Join Date
    Jul 2009
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks Amphiluke -

    Having one very weird issue though, when I host this on my machine using WAMP, it works absolutely fine - the captions change with each picture,

    If I put this on my server - located here :

    http://morrish.juiceserver.co.uk/new_file.html

    The caption dissapears after the first image change. The two files are completely identical, I don't understand what could be causing this, any thoughts?

  • #4
    Regular Coder Amphiluke's Avatar
    Join Date
    Jul 2009
    Posts
    312
    Thanks
    3
    Thanked 89 Times in 89 Posts
    I have just walked the link, and the caption is always visible. Try to clear browser cache...
    Last edited by Amphiluke; 07-16-2009 at 02:04 PM.
    I am still learning English

  • #5
    New Coder
    Join Date
    Jul 2009
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I have cleared the browser cache and even tried in Chrome (I'm using Firefox) but still cannot see the captions after the first click.

    Can I ask what browser you are using?

  • #6
    Banned
    Join Date
    Mar 2009
    Posts
    248
    Thanks
    3
    Thanked 68 Times in 66 Posts
    HughbertD:

    Try the following, as is.

    I made some changes to the code and your markup.


    Code:
    <!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 = .32 // thumbnails are 32% 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);	
    	
    </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: 0px;}	
    	.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/homepage5.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/hompage1.jpg"><img src="./images/homepage1.jpg" width="96" height="64" alt="Second Image Description" title="Second Image Description"></a>
    			<a href="./images/homepage2.jpg"><img src="./images/homepage2.jpg" width="96" height="64" alt="Third Image Description" title="Third Image Description"></a>
    			<a href="./images/homepage3.jpg"><img src="./images/homepage3.jpg" width="96" height="64" alt="Fourth Image Description" title="Fourth Image Description"></a>
    			<a href="./images/homepage4.jpg"><img src="./images/homepage4.jpg" width="96" height="64" alt="Fifth Image Description" title="Fifth Image Description"></a>
    		</div>
    	</body>
    </html>

  • #7
    Regular Coder Amphiluke's Avatar
    Join Date
    Jul 2009
    Posts
    312
    Thanks
    3
    Thanked 89 Times in 89 Posts
    HughbertD, I used FF and Opera.

    P.S. In IE script doesn't work properly (irrespective of caption)
    I am still learning English

  • #8
    New Coder
    Join Date
    Jul 2009
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts
    HI 12PackMack (nicename)

    I've used that code as is, and I'm getting the same problem.

    The first image displays with a caption.

    Then if I click another image, the caption dissapears.

    Now I click the original image again, the first caption reappears but if I click a different image the caption is lost forever and doesn't display.

    Are you too, like Amphiluke, not seeing this at all?


    EDIT : Incidentally, the whole div containing the caption goes missing, not just the caption itself

  • #9
    Banned
    Join Date
    Mar 2009
    Posts
    248
    Thanks
    3
    Thanked 68 Times in 66 Posts
    HughbertD:

    The source code at the link you posted is not the code I posted.

    I made changes to your markup because the thumbnail proportions were not correct. I also changed the thumbProportion variable to agree with the changes I made to the markup.

    Post a link to the page that contains ONLY the code I posted above.

  • #10
    New Coder
    Join Date
    Jul 2009
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Sorry,

    Here is your code,

    http://morrish.juiceserver.co.uk/new_file.php

    I am still seeing the missing caption, but appear to be the only person on the planet who is(!!!)

  • #11
    Banned
    Join Date
    Mar 2009
    Posts
    248
    Thanks
    3
    Thanked 68 Times in 66 Posts
    HughbertD:

    That page works for me in FF and IE.

    What browser(s) are you using?

  • #12
    New Coder
    Join Date
    Jul 2009
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I'm using Firefox 3.5, and have tried it in Chrome also, one thing, I'm using Mobile Broadband - with the dongle thing, I have no idea if this would effect the outcome.

    Perhaps my little dongle is caching something?

  • #13
    Banned
    Join Date
    Mar 2009
    Posts
    248
    Thanks
    3
    Thanked 68 Times in 66 Posts
    HughbertD:

    I have no idea what a "dongle" is. I'm using FF 3.0.11 and IE6.

    Try the code offline. Copy it to a desktop folder, create an images folder inside of that folder, paste your images to images folder, then open the .html document.

    That's how I tested it. It works fine for me offline and online.

    So, find out if your problem has to do with viewing the page online only, or if it doesn't work both online and offline.

  • #14
    New Coder
    Join Date
    Jul 2009
    Posts
    20
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Okay, the documents work fine offline.

    Sorry, the "dongle" is a little USB stick that uses 3G to give you internet access, one of its features is reducing image quality to save on bandwidth, I think it also caches a lot of material to save on bandwidth too.

    This was the problem, I turned off the "Speed manager" as its called, and I no longer have this problem.

    I'm going to try this live on my site now, thanks a million for all your help both 12PackMack and Amphiluke, I really appreciate it

  • #15
    Banned
    Join Date
    Mar 2009
    Posts
    248
    Thanks
    3
    Thanked 68 Times in 66 Posts
    HughbertD:

    I see.

    Why did you give the file a .php extension, when it contains no PHP?

    Does your host require that the home or default page be named "index.php" or "default.php"? index.html or default.html should work, too. I wouldn't use the .php extension. It's an .html document.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •