Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: CSS Image Gallery hover over image remain in gallery container

  1. #1
    Join Date
    Jul 2010
    Posts
    24
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default CSS Image Gallery hover over image remain in gallery container

    I really like this image viewer:

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

    but was wondering if there is a way to cause the last image you hovered over to remain in the gallery container even when your mouse isn't hovering over it? Please...if someone can help it would be much appreciated. Thanks in advance.

    Mike

  2. #2
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    Maybe this script has the functionality you want
    http://www.dynamicdrive.com/dynamici...thumbnail2.htm

  3. #3
    Join Date
    Jul 2010
    Posts
    24
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default without jquery script

    Thanks for the quick reply...but do you know any script with no j query or JavaScript? Just purely css?

  4. #4
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    Not really. I guess you need javascript if you want it to consistently show the last 'mousedover' picture, otherwise you would have to rely on the z-index alone. As an alternative you can set a background picture as a default with the script you use now then that would be seen whenever you mouse out.
    What is wrong with javascript anyway ?

  5. #5
    Join Date
    Jul 2010
    Posts
    24
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    I'm just used to CSS...I find it easier to manage. But I'll give Image Thumbnail Viewer II a try. Thanks again.

    Mike

  6. #6
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    I think you will find it quite easy if you just follow the instructions , but post a link to your testpage online if you run into trouble.

  7. #7
    Join Date
    Jul 2010
    Posts
    24
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    Hi azoomer. I'm playing with the thumbnail 2 gallery and really like it but I'm scratching my head on how to do a few minor adjustments. How would I:

    Link each picture in the gallery and
    place an image in the image container when the page is first loaded?

    Thanks for all your help. I really appreciate it.

  8. #8
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    Here is an example of how you can put a background image in the loadarea

    Code:
    <style type="text/css">
    #loadarea {
    	background-image: url(images/backgroundimage.jpg);
    	background-repeat:no-repeat;
    }
    </style>
    it works best if the images are the same size, at least the other pictures should not be smaller than the background pic.

    About the link, take a look a this from the doc
    <a href="myimages/first.jpg" title="This is a picture of my dog!" rel="enlargeimage" rev="targetdiv:loadarea,link:http://cnn.com">Thumbnail</a>
    Last edited by azoomer; 07-22-2010 at 09:49 PM.

  9. #9
    Join Date
    Jul 2010
    Posts
    24
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default Almost there

    Is it possible for the background image to disappear after I roll over a thumbnail? The reason is because the images in the container have a fade in effect and each time the picture fades in you see the background container image before the main image loads. Also, how would I link a thumbnail pic to a hyperlink?

  10. #10
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    That's a good point, I'll try to see if I can come up with something

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
  •