PDA

Click to See Complete Forum and Search --> : Linking images for a Gallery viewer - how to?

Lapinbleu
04-02-2006, 06:12 AM
I found a nice "Gallery viewer" script which does exactly what I want, putting thumbnails around a larger space, which then obediently displays the large image corresponding to the thumb clicked on. I have no difficulty changing the lay-out, sizes and number of thumbs, etc, but it only works properly when I put the images in the same folder as the page. With several pages, the folder will become large, and confusing, so I would prefer to pack the page's images in a sub-folder of their own, and call them from there.

Here's the code :

<HEAD>
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);

ns3up = (browserName == "Netscape" && browserVer >= 3);
ie4up = (browserName.indexOf("Microsoft") >= 0 && browserVer >= 4);

function doPic(imgName) {
if (ns3up || ie4up) {
imgOn = ("" + imgName);
document.mainpic.src = imgOn;}}
</HEAD>


Then;
<BODY>
<center>
<table width=360 border=0 cellspacing=0 cellpadding=0>
<tr>
<td><a href="javascript:doPic('p1.jpg');"><img src="p1.jpg" width=90 height=60 border=0></a></td>........etc, etc..........
</tr>
<tr>
<td colspan=4 align=center><img name="mainpic" src="p1.jpg" width=360 height=240 border=0></td>
</tr>
<tr>
<td><a href="javascript:doPic('p5.jpg');"><img src="p5.jpg" width=90 height=60 border=0></a></td>
<td><a href="javascript:doPic('p6.jpg................etc, etc....

If I put my images in an external folder (/images) they appear, but don't change any more..... How do I link them properly? This would be soooo useful to me. Thanks, Lapinbleu.

`(;o) This is me - I have a beret and a big nose...
Zipline
04-02-2006, 09:53 AM
You would need to add /images/ to the javascript section so when you click the link it knows where to find the images.

Try putting:
imgOn = ("/images/" + imgName);

in place of
imgOn = ("" + imgName);

and report on your result.
Lapinbleu
04-02-2006, 10:55 AM
Thanks for your prompt reply, Zipline, but no, something is still missing.

Of course I tried between the "", well, it was begging for it.
Now when I put imgOn=("images/"+imgName); without the first / I get no thumbnails, but when I click on the empty box I get the correct mainpic. Getting there! I will experiment further, and keep posted...

`(;o)
Lapinbleu
04-02-2006, 11:03 AM
Yes, got it! To display the opening picture I must also tell it where to look...

<img name="mainpic" src="images/p1.jpg">

And to find the thumbnail
<a href="javascript:doPic('p1.jpg');"><img src="images/p1.jpg" width=100 height=75 border=0></a>

The height/width reducing it in size. Great! This will be most useful! Thanks again
Zipline
04-02-2006, 01:21 PM
No problem, sorry I didnt mention that in the first place I thought you had that part figured out. Enjoy!