Hi there,<br />
<br />
I read some time ago (when I wasn't interested in it) that you can have a page with multiple thumbnails and when you click on the thumbnail it just goes to the same page template but loads up the corresponding image. Did I explain that right? <br />
What I have is a LARGE group of pictures that I have as thumbnails. The idea is that when you click on the thumbnail, a larger picture appears in the mainFrame on the same page. I don't want to have to have a different page for each image and I'm lead to believe that I can just have one page and that page loads up the picture depending on what thumbnail you click on. I know I can just link the thumbnail to the image and have it come up that way but I want it to look a bit snazzy and have a brief description under each full scale picture. Hope I've expressed myself properly. Any help would be greatly appreciated.<!--content-->I gues u could use frames, but I suggest you make the same page, but the main content would be the image, then link the thumbnail to that page.<!--content-->Thanks for your reply but yeah, I didn't think I explained myself right. Let me try again. The Photos page I have contains 3 frame windows. The heading window at the top for the heading, the thumbnail window on the left with the thumbnails and the main window taking up the rest of the page for the image. At the moment I have the thumbnails linked to the larger image so that it appears in the main frame window. The problem is I want the image centered and a brief description of where it was taken. To do that I need to link the thumbnail to a page with the image and description in it. The other problem is that I have a lot of pictures and I don't fancy making seperate pages for each picture. I'd read somewhere once that I could make just one page and have some code within it so when the page loads up it goes off and gets the image according to which thumbnail was clicked on, thereby saving a lot of time making pages for each image. I think there is a specific line of code I can use that takes the value of the thumbnail and uses it to search for the larger image. I'm just not sure what that code is...<!--content-->I don't think there's a code that does dat...The only way I think u can do it is by making a seperate page for every image.<!--content-->In the mainFrame page:<br />
<br />
<img id="bigPic" name="bigPic" src=http://www.htmlforums.com/archive/index.php/"whatever.gif"><br />
<div id="picText" name="picText"> </div><br />
<br />
<br />
In the page with the thumbnails:<br />
<br />
<script language="Javascript"><br />
function showBig(oImg) {<br />
var mainFrame = parent.frames.mainFrame;<br />
mainFrame.images.bigPic.src = <!-- m --><a class="postlink" href="http://www.htmlforums.com/archive/index.php/oImg.src;">http://www.htmlforums.com/archive/index.php/oImg.src;</a><!-- m --><br />
var picTextDiv = (document.all) ? mainFrame.document.all.picText : (document.getElementById) ? mainFrame.document.getElementById("picText") : null;<br />
if (picTextDiv) showText(oImg,picTextDiv);<br />
}<br />
function showText(oImg,oDiv) {<br />
var newHTML = " "<br />
var src = <!-- m --><a class="postlink" href="http://www.htmlforums.com/archive/index.php/oImg.src;">http://www.htmlforums.com/archive/index.php/oImg.src;</a><!-- m --><br />
switch (src) {<br />
case "tigers.jpg": <br />
newHTML = "Tigers are stripey";<br />
break;<br />
case "nudes.jpg": newHTML = "This is <b>art</b>, not porn";<br />
break;<br />
case "mustard.gif":<br />
newHTML = "English mustard is <u>Hot</u>!<br />
break;<br />
}<br />
oDiv.innerHTML = newHTML;<br />
}<br />
</script><br />
<br />
<img src=http://www.htmlforums.com/archive/index.php/"tigers.jpg" onclick="showBig(this)"><br />
<img src=http://www.htmlforums.com/archive/index.php/"nudes.jpg" onclick="showBig(this)"><br />
<img src=http://www.htmlforums.com/archive/index.php/"mustard.gif" onclick="showBig(this)"><!--content-->Thank you very much for that John. I've done what you said but am still have a few problems. I'm only a novice with Javascript so perhaps you could let me know if there are any other things to configure to my site other than the names of the images and the text. When I put that code in like the onClick="showBig(this)" part, the thumbnail picture ceases to be a link so I'm not sure if I need to change anything else in the showBig(oImg) function part.<!--content-->Forgot to mention it also has Error on page message when I try the page out in my browser.<!--content-->
<br />
I read some time ago (when I wasn't interested in it) that you can have a page with multiple thumbnails and when you click on the thumbnail it just goes to the same page template but loads up the corresponding image. Did I explain that right? <br />
What I have is a LARGE group of pictures that I have as thumbnails. The idea is that when you click on the thumbnail, a larger picture appears in the mainFrame on the same page. I don't want to have to have a different page for each image and I'm lead to believe that I can just have one page and that page loads up the picture depending on what thumbnail you click on. I know I can just link the thumbnail to the image and have it come up that way but I want it to look a bit snazzy and have a brief description under each full scale picture. Hope I've expressed myself properly. Any help would be greatly appreciated.<!--content-->I gues u could use frames, but I suggest you make the same page, but the main content would be the image, then link the thumbnail to that page.<!--content-->Thanks for your reply but yeah, I didn't think I explained myself right. Let me try again. The Photos page I have contains 3 frame windows. The heading window at the top for the heading, the thumbnail window on the left with the thumbnails and the main window taking up the rest of the page for the image. At the moment I have the thumbnails linked to the larger image so that it appears in the main frame window. The problem is I want the image centered and a brief description of where it was taken. To do that I need to link the thumbnail to a page with the image and description in it. The other problem is that I have a lot of pictures and I don't fancy making seperate pages for each picture. I'd read somewhere once that I could make just one page and have some code within it so when the page loads up it goes off and gets the image according to which thumbnail was clicked on, thereby saving a lot of time making pages for each image. I think there is a specific line of code I can use that takes the value of the thumbnail and uses it to search for the larger image. I'm just not sure what that code is...<!--content-->I don't think there's a code that does dat...The only way I think u can do it is by making a seperate page for every image.<!--content-->In the mainFrame page:<br />
<br />
<img id="bigPic" name="bigPic" src=http://www.htmlforums.com/archive/index.php/"whatever.gif"><br />
<div id="picText" name="picText"> </div><br />
<br />
<br />
In the page with the thumbnails:<br />
<br />
<script language="Javascript"><br />
function showBig(oImg) {<br />
var mainFrame = parent.frames.mainFrame;<br />
mainFrame.images.bigPic.src = <!-- m --><a class="postlink" href="http://www.htmlforums.com/archive/index.php/oImg.src;">http://www.htmlforums.com/archive/index.php/oImg.src;</a><!-- m --><br />
var picTextDiv = (document.all) ? mainFrame.document.all.picText : (document.getElementById) ? mainFrame.document.getElementById("picText") : null;<br />
if (picTextDiv) showText(oImg,picTextDiv);<br />
}<br />
function showText(oImg,oDiv) {<br />
var newHTML = " "<br />
var src = <!-- m --><a class="postlink" href="http://www.htmlforums.com/archive/index.php/oImg.src;">http://www.htmlforums.com/archive/index.php/oImg.src;</a><!-- m --><br />
switch (src) {<br />
case "tigers.jpg": <br />
newHTML = "Tigers are stripey";<br />
break;<br />
case "nudes.jpg": newHTML = "This is <b>art</b>, not porn";<br />
break;<br />
case "mustard.gif":<br />
newHTML = "English mustard is <u>Hot</u>!<br />
break;<br />
}<br />
oDiv.innerHTML = newHTML;<br />
}<br />
</script><br />
<br />
<img src=http://www.htmlforums.com/archive/index.php/"tigers.jpg" onclick="showBig(this)"><br />
<img src=http://www.htmlforums.com/archive/index.php/"nudes.jpg" onclick="showBig(this)"><br />
<img src=http://www.htmlforums.com/archive/index.php/"mustard.gif" onclick="showBig(this)"><!--content-->Thank you very much for that John. I've done what you said but am still have a few problems. I'm only a novice with Javascript so perhaps you could let me know if there are any other things to configure to my site other than the names of the images and the text. When I put that code in like the onClick="showBig(this)" part, the thumbnail picture ceases to be a link so I'm not sure if I need to change anything else in the showBig(oImg) function part.<!--content-->Forgot to mention it also has Error on page message when I try the page out in my browser.<!--content-->