Image gallery Java effect HELP?!
Hi. I've designed a website for a property company. On the pages that offer details about individual properties I have a layout that consists of a large main image and then a series of small thumbnails underneath. What I need to do is set it up so that when you click on one of the thumbnails the image appears in the place of the large main image, NOT open in a new browser window. I've heard this is a Java effect. Can anyone tell me how I can achieve this?
The only thing is, I don't have the option of having images on separate pages or anything like that. I'm using bespoke software through the company I work for and extra pages will cost the client £49 PER PAGE! So I need a way of doing this without requiring an infinite number of separate pages. I can upload any number of images/documents etc, but the number of actual pages is fixed.
Some help would be greatly appreciated!
:confused:
Re: Image gallery Java effect HELP?!
This can be acheived using the <iframe> tag and using it's name as the target for the thumbnail links.
However, for the cost of one extra page you could buy Xara Web Designer and make your life easier ;)
Re: Image gallery Java effect HELP?!
Hi Sledger. Thanks for the reply. ...When you say 'use the <iframe> tag', where exactly do you mean? I followed the link, but don't understand where I'd put the code. Do I have to put '<iframe> before and after the large main image? But then how do I relate the thumbnails to it? I don't want scroll bars at the bottom and side of the large image either - is that a problem?
Basically, my experience of websites is fairly limited. I design them to look nice and be easy to construct. I can build simple rollovers, drop downs and basic image lightboxes, but as soon as it gets more complex than that I'm out of my depth!
Re: Image gallery Java effect HELP?!
Very simplified example. (You will need to position your iframe with tables or .CSS, whichever your bespoke software uses.)
<html>
<head>
</head>
<body>
<center>
<br>
<a href="large0.jpg" target="largeversion"><img src="thumb0.jpg" border="0"></a>
<a href="large1.jpg" target="largeversion"><img src="thumb1.jpg" border="0"></a>
<br>
<iframe name="largeversion" src="logo.jpg" width="640" height="480" scrolling="no" frameborder="2" marginheight="0" margingwidth="0"></iframe>
</center>
</body>
</html>
Change thumbnail and large image names to suit, change iframe size to suit large photo size.
The iframe is the (named) target 'frame' where the large version will appear when the linked thumbnail is clicked provided that the link (<a href ) points to the correct target name (target=largeversion)
logo.jpg would be the image which appears by default in the iframe space before any linked thumbnail is clicked.
