...

View Full Version : Help with change to JS gallery



HughbertD
07-16-2009, 11:37 AM
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



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

Amphiluke
07-16-2009, 12:26 PM
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?

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

HughbertD
07-16-2009, 02:43 PM
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?

Amphiluke
07-16-2009, 03:01 PM
I have just walked the link, and the caption is always visible. Try to clear browser cache...

HughbertD
07-16-2009, 03:12 PM
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?

12 Pack Mack
07-16-2009, 03:15 PM
HughbertD:

Try the following, as is.

I made some changes to the code and your markup.




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

Amphiluke
07-16-2009, 03:18 PM
HughbertD, I used FF and Opera.

P.S. In IE script doesn't work properly (irrespective of caption)

HughbertD
07-16-2009, 03:19 PM
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

12 Pack Mack
07-16-2009, 03:23 PM
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.

HughbertD
07-16-2009, 03:25 PM
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(!!!)

12 Pack Mack
07-16-2009, 03:30 PM
HughbertD:

That page works for me in FF and IE.

What browser(s) are you using?

HughbertD
07-16-2009, 03:33 PM
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?

12 Pack Mack
07-16-2009, 03:39 PM
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.

HughbertD
07-16-2009, 03:42 PM
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

12 Pack Mack
07-16-2009, 03:47 PM
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.

HughbertD
07-16-2009, 03:55 PM
Hi,

I gave the php extension because I just trying anything at the time to see why one of my files (which was hosted locally -- though I didn't think much of it at the time) was working and the other on the server wasn't.

The page this is for is here:
http://morrish.juiceserver.co.uk/plot_index.php?plot_id=179&prop_id=20

And as it was a PHP page I thought I would try to see if it made a difference.

The only problem I am having now is that when I click the image it just follows the link and displays the picture alone.

Could this be a CSS problem?

HughbertD
07-16-2009, 04:08 PM
Okay, I was missing some vital code and this was causing the links to simply act like links with no javascript,

However my caption will no longer change, :mad:

This is getting me very confused, but thanks to all the help I've had!

http://morrish.juiceserver.co.uk/plot_index.php?plot_id=179&prop_id=20

12 Pack Mack
07-16-2009, 04:36 PM
HughbertD:

You have 3 other style sheets.

The code assumes that there is only 1 style sheet.

Change this line, to [3] from [0]


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


in the init() function.

12 Pack Mack
07-16-2009, 04:49 PM
HughbertD:

I inserted your <link> tags in the code below, and changed the [0] to [3] and it works for me.


<!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">
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<link href="css/menu.css" rel="stylesheet" type="text/css" />
<link href="css/lightbox.css" rel="stylesheet" type="text/css" />
<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[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 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/homepage1.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>

HughbertD
07-16-2009, 05:24 PM
Thanks a million for your help Mack, it's absolutely perfect.

Thanks again.

12 Pack Mack
07-16-2009, 05:27 PM
HughbertD:

You're welcome. Good luck with your project.

12 Pack Mack
07-16-2009, 06:15 PM
HughbertD:

You need to delete the following. It's used only in IE when the thumbnails are to stay in a fixed position, even as the page is scrolled. You must have changed that part, position: fixed, in the other section, because it's working for me in FF.




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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum