Results 1 to 6 of 6

Thread: Please Help with CSS Image Gallery

  1. #1
    Join Date
    Oct 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Please Help with CSS Image Gallery

    http://www.dynamicdrive.com/style/cs...-gallery/P190/

    I've just joined this forum in hopes that I can get some assistance with the CSS Image Gallery. I'm very new at this, so forgive me if I get some of the jargon wrong. I have all the code in place for the css and the html. The assistance I need is as follows:

    1. I would like the thumbnail images (width=80px height=59px) to be in a different location than at the top-left of the page. Actually, referring to the top-left corner of the first thumb in the block of thumb images, I would like the position to be at top=177px and left=513px. I would also like the block of thumbs to sit off TO THE RIGHT of the large image width=375px and height=275px (which I really would like to show up at top=160px and left=113px)

    What code do I need to put where?

    2. Is there a way for the large Image to always be visible? RATHER THAN JUST ON MOUSEOVER?

    3. I would like to connect a link to the thumbs that direct to a "Page.html"

    I've been struggling my way through this all day, every day, for over a week now, and I just can't seem to figure it out. I'm just too new at this to know what to do...I just seem to know at this point what not to do!

    Hopefully, someone here can direct me? Thank you in advance. I'll watch for an answer.
    Last edited by polarbaby; 10-31-2007 at 10:30 PM. Reason: Adding url to script for reference

  2. #2
    Join Date
    Nov 2007
    Location
    India
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile Hi

    Hi
    It seems to be a bit confusing regarding the first thing that You needs.May be its bcos for my bad english .

    For the rest of the needs theres solution

    I thing this change in CSS will help You .


    .thumbnail span{ /*CSS for enlarged image*/
    position: absolute;
    visibility: visible;
    top: 0;
    left: 230px; /*position where enlarged image should offset horizontally */
    background-color: lightyellow;
    padding: 5px;
    width:200px;
    height:200px;
    border: 1px dashed gray;
    color: black;
    text-decoration: none;
    }

    .thumbnail span img{ /*CSS for enlarged image*/
    border-width: 0;
    padding: 2px;
    }

    .thumbnail:hover span{ /*CSS for enlarged image*/
    visibility: visible;
    top: 0;
    left: 230px; /*position where enlarged image should offset horizontally */
    z-index: 50;
    }


    Only issue is that You might need to use a fixed height or else use images with identical height and width. Else the image in the bottom will be visible.

    Linking issue can be changed by just changing the

    <a class="thumbnail" href="dhfsdhfsdfhgh">

    I think this will solve Your issue ..

  3. #3
    Join Date
    Oct 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Thank you, I'll give it a try

    Thank you for your response. I certainly appreciate your assistance. I will try to apply the changes you suggest and see where that takes me. As for the first question (of 3) I was hoping that there was a way for the thumbnails to reside in a different location than at the top left of the page. Anyway, I'm going to work on what you gave me & I'll post again with the results. Hopefully, you, or someone else, can check back to bring the entire issue to a close. Again, I am truly grateful. (If I knew how to add a "thank you" to your name, I surely would!)

  4. #4
    Join Date
    May 2006
    Location
    Sydney, Australia - Near the coast.
    Posts
    1,995
    Thanks
    0
    Thanked 8 Times in 7 Posts

    Default

    (If I knew how to add a "thank you" to your name, I surely would!)
    You could actually thank the user by clicking the button right under the post.
    Peter - alotofstuffhere[dot]com - Email Me - Donate via PayPal - Got spare hardware? Donate 'em to me :) Just send me a PM.
    Currently: enjoying the early holidays :)
    Read before posting: FAQ | What you CAN'T do with JavaScript | Form Rules | Thread Title Naming Guide

  5. #5
    Join Date
    Oct 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    And thank you, too, Peter!

  6. #6
    Join Date
    Oct 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cool 2 out of 3 is good, right?

    I'm so tickled! Those solutions were exactly what I needed. Now the only question remaining is:

    How can I reposition the thumbnails to a different location?

Bookmarks

Posting Permissions

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