Displaying different images in same position in window

  • Thread starter Thread starter Guest
  • Start date Start date
G

Guest

I have a set of thumbnails on a page (I have saved the thumbnails as separate files). I would like an enlarged picture to display (which I also have available) on the same web page as you click each thumbnail, changing the previous picture to the new enlarged one corresponding to the thumbnail clicked.

It's a portfolio that I'm trying to display, and I would like to have the user quickly zip through the portfolio without having to close a new window, hit the back back key, etc. All images would be displayed on the same web page. Can someone help

Thank you!
 
I'm aware of the photo gallery feature and it's not entirely flexible. I'd like to build my own photo gallery...
 
Display them in an Iframe on the same page and set the Target frame to the iframe.

--
Steve Easton
Microsoft MVP FrontPage
95isalive
This site is best viewed............
........................with a computer

Randy said:
I have a set of thumbnails on a page (I have saved the thumbnails as separate files). I
Click to expand...
would like an enlarged picture to display (which I also have available) on the same web
page as you click each thumbnail, changing the previous picture to the new enlarged one
corresponding to the thumbnail clicked.
It's a portfolio that I'm trying to display, and I would like to have the user quickly
Click to expand...
zip through the portfolio without having to close a new window, hit the back back key,
etc. All images would be displayed on the same web page. Can someone help?
 
Steve, I can't tell you how much time I've spent trying to figure this out... and how much time you've saved me. THANKS

Randy
 
Randy said:
I have a set of thumbnails on a page (I have saved the thumbnails as separate
Click to expand...
files). I would like an enlarged picture to display (which I also have
available) on the same web page as you click each thumbnail, changing the
previous picture to the new enlarged one corresponding to the thumbnail clicked.
It's a portfolio that I'm trying to display, and I would like to have the user
Click to expand...
quickly zip through the portfolio without having to close a new window, hit the
back back key, etc. All images would be displayed on the same web page. Can
someone help?
Thank you!
Click to expand...



if you know javascript, use this code - it presents your thumbnails around the
edge of the large image, and the large image changes onclick of the little
images.

sorry, I don't havea working example at the moment.

this code was from http://myplace.50g.com if your're interested the product to
download free is "Javascript Vault" - and has lots of other useful scripts.

Just change your images for those examples below, to the same dimensions, and it
should work OK.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<LINK href="general.css" rel="stylesheet" type="text/css">

<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Jenny Blewitt ([email protected]) -->
<!-- Web Site: http://www.webdesignsdirect.com -->
<!-- Begin
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;
}
}
// End -->
</script>

</HEAD>

<BODY Background=../graphics/grayback.jpg>
<center><BR>
<table width=360 border=1 cellspacing=0 cellpadding=0>
<tr>
<td><a href="javascript:doPic('toad.jpg');"><img src="toad.jpg" width=90
height=60 border=0></a></td>
<td><a href="javascript:doPic('lizard.jpg');"><img src="lizard.jpg" width=90
height=60 border=0></a></td>
<td><a href="javascript:doPic('gecko.jpg');"><img src="gecko.jpg" width=90
height=60 border=0></a></td>
<td><a href="javascript:doPic('chameleon.jpg');"><img src="chameleon.jpg"
width=90 height=60 border=0></a></td>
</tr>
<tr>
<td colspan=4 align=center><img name="mainpic" src="toad.jpg" width=365
height=190 border=0></td>
</tr>
</table>


</center>
</BODY>
</HTML>
 
Back
Top