Results 1 to 6 of 6

Thread: css image gallery how to show image

  1. #1
    Join Date
    Jan 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default css image gallery how to show image

    hi all,

    could anyone tell me how i can make this code here show 1 large image without the need to hover over it when a user enters the page ?

    Say i have 4 images i would like one of the images to be already showing in its larger form until someone hovers over the thumbnails.

    In its current state theres is no large image showing as default.

    I need to fill the space on my page with a larger image as 4 thumbnails would look to small.

    This code works with my site, so this is the only code ican use for the job.

    If anyone can help that would be great, even better if you can tell me how to make the images change only when clicked instead of hover.




    Here`s the code im talking about

    http://www.dynamicdrive.com/style/cs...ry/P400/#thumb

  2. #2
    Join Date
    Jan 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    nobody?????????

  3. #3
    Join Date
    Jan 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    i guess this forum is pretty dead then

  4. #4
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    512
    Thanks
    9
    Thanked 61 Times in 59 Posts

    Default

    Give me ur email and i can email u a code that u can click on

  5. #5
    Join Date
    Jan 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    My main concern is having one of the images in this code displayed when you first enter the page ,rather than the default which does not show a large image.

    Now if you could tell me how i can do that with this particular code that would be great!

  6. #6
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    512
    Thanks
    9
    Thanked 61 Times in 59 Posts

    Default

    Code:
    .thumbnail span{ /*CSS for enlarged image*/
    position: absolute;
    background-color: lightyellow;
    padding: 5px;
    left: -1000px;
    border: 1px dashed gray;
    visibility: hidden;color: black;
    text-decoration: none;
    }
    delete the orange code. (try that)

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
  •