...

View Full Version : novice - image gallery help



portia
11-20-2010, 04:41 AM
Hi everyone,
I'm not sure I'm posting this correctly (or if anyone is actually willing to help me out :D) but I'm looking for the javascript code to create the following comparative image gallery.

http://i528.photobucket.com/albums/dd328/portia1981_2008/Revised-RBA.jpg

Basically the image gallery needs to do the following.

When I click on an image (small grey boxes on the bottom), that specific image will appear in the first window. When I click on another image, it will appear in the second window. And finally, click on one more image so that it appears in the third window.

If I want to remove one of the images from the large window, I want to do so by clicking the clear button underneath the image I want to remove.

If anyone could help me out with this, I would be EXTREMELY grateful!

Old Pedant
11-20-2010, 08:18 AM
Tell you what, you create the HTML to display it like that (you can just use <div>s with a background color for the 3 top images...or you could use a "placeholder" image, as you prefer) and then I'll help you add the JS code to make it work.

portia
11-20-2010, 04:09 PM
Tell you what, you create the HTML to display it like that (you can just use <div>s with a background color for the 3 top images...or you could use a "placeholder" image, as you prefer) and then I'll help you add the JS code to make it work.

Oh wow! That is really nice of you. Like I said I am new at this so I hope I do this right.


<html>
<head>

</head>

<body>

<!--These are the image placeholders for the three green windows-->

<img src="window1.jpg" id="window1" />
<img src="window2.jpg" id="window2" />
<img src="window3.jpg" id="window3" />

<!--These are the image placeholders for the bottom 8 grey thumbnails. I will only list 3 for this example. The image that should appear in the windows after clicking on a thumbnail is a larger pic of the thumbnail (not the thumbnail size. I'll call the large photos "large1" "large2" "large3"-->

<img src="thumb1.jpg" id="thumb1" />
<img src="thumb2.jpg" id="thumb2" />
<img src="thumb3.jpg" id="thumb3" />

<script type"text/javascript" src="java1.js">

</script>
</body>
</html>

I don't know if it matters but I need to put the javascript in a separate file. Like I said I just started doing this so I apologize in advance lol.

Old Pedant
11-20-2010, 09:47 PM
Ummm...I *meant* create the HTML to "style" it to look like the image you provided.

I'm crappy at styles.

But okay, I guess I'll tackle it as is. Later.

Old Pedant
11-20-2010, 10:44 PM
Here:

http://www.clearviewarts.com/picker.html

You can do a VIEW==>>SOURCE (or Page Source) to see the HTML.

Pretty simplistic, but you can pretty it up.

NOTE: The images that have white at top and bottom really do have it there. They just happened to be what I had handy for vertical pictures.

Old Pedant
11-20-2010, 10:45 PM
I did *not* put any protection in against picking the same image more than once. I didn't figure that was important.

portia
11-21-2010, 04:38 PM
THANK-YOU, THANK-YOU, THANK-YOU!!!!!!!!!

Did I mention thank-you? I really appreciate your help. That was so nice of you! :thumbsup:

Old Pedant
11-21-2010, 10:51 PM
You missed one thing. You were supposed to compliment my wife on her artwork. <grin/>

You're welcome. Maybe you can tell us what this is for?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum