Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    3
    Thanks
    3
    Thanked 0 Times in 0 Posts

    novice - image gallery help

    Hi everyone,
    I'm not sure I'm posting this correctly (or if anyone is actually willing to help me out ) but I'm looking for the javascript code to create the following comparative image gallery.

    http://i528.photobucket.com/albums/d...evised-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!

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    portia (11-20-2010)

  • #3
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    3
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    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.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    portia (11-21-2010)

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    I did *not* put any protection in against picking the same image more than once. I didn't figure that was important.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    portia (11-21-2010)

  • #7
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    3
    Thanks
    3
    Thanked 0 Times in 0 Posts
    THANK-YOU, THANK-YOU, THANK-YOU!!!!!!!!!

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

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    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?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •