Photo gallery -- css? java?
I'd like to make a photo gallery where on first sight, you see a group of thumbnails and one of the images large. Then, when you click on one of the thumbnails, the large image changes to whichever one you clicked on.
So basically, instead of the usual gallery where when you click on a thumbnail it takes you to a new page with the large image, I would want all thumbnails and the large image on the same page.
Anyone know how to do this? I have dreamweaver and photoshop. Can I do this with these?
I can try to find an example...
Thanks!
marcata posted this at 16:02 — 29th March 2005.
He has: 6 posts
Joined: Dec 2003
here's a real estate website that uses what i'm talking about. looks like it's java.
http://paularedmond.com/html/pListingDetail.asp?mls_number=p20049201556
timjpriebe posted this at 16:04 — 29th March 2005.
He has: 2,667 posts
Joined: Dec 2004
You should be able to do something simple like that by just using an iframe. Of course, that may or may not look good stylistically, depending on whether the background on the page the gallery is on is an image or just a color.
There's a halfway decent iframe tutorial here:
http://www.samisite.com/test-csb2nf/id43.htm
I'm sure there are better tutorials out there, that was just the second one listed in Google's results.
Tim
http://www.tandswebdesign.com
CptAwesome posted this at 22:45 — 29th March 2005.
He has: 370 posts
Joined: Dec 2004
easy enough to do with a javascript code
<script language="javascript">function replace_image(filename)
{
bigimage.src = filename;
}
</script>
Just make sure to include name="bigimage" (or whatever) works in IE and FF
marcata posted this at 06:42 — 2nd April 2005.
He has: 6 posts
Joined: Dec 2003
I am not very familiar with java, so I tried to just copy the code directly from that site and replace their photos with mine. However, it doesn't work! Does anyone know why? I'm probably overlooking something very obvious.
Here's the page I'm working with:
http://marcata.net/java.htm
I put this in the header:
<script src="/js/jslib.js" type="text/javascript"></script>
<script type="text/javascript">
function printPage() {
if (window.print)
window.print()
else
alert("Sorry, your browser doesn't support this feature.");
}
</script>
Then this in the body for the big photo (I've abbreviated). That is my image. They previously had a numbered image:
And for the little photos:
etc.
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.