Results 1 to 4 of 4

Thread: CSS Image Gallery onclick

  1. #1
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,980
    Thanks
    43
    Thanked 3,196 Times in 3,158 Posts
    Blog Entries
    12

    Default CSS Image Gallery onclick

    This one has me stumped. In the CSS Image Gallery by Dynamic Drive:

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

    It says (emphasis added):

    This is a purely CSS based image gallery that displays larger versions of thumbnail images dynamically when the mouse hovers over them. A rich HTML caption can be added to the enlarged image, and every aspect of the Image Gallery exists as plain HTML on the page. The idea is to use CSS's ":hover" pseudo class to cause an element to react onMouseover. When that happens, an absolutely positioned container holding the enlarged image, anchored on the page by another container with position set to relative, is shown. Furthermore, it's possible to modify the behavior so the enlarged images are only shown onClick, though IE6 currently doesn't support this behavior well. The gallery works in IE6+, Firefox, Opera 8+.
    How is that possible? CSS doesn't do onclick, or does it? CSS 3 perhaps?

    In any case, this claim is not documented on the page and someone was asking about it. Anyone have a clue?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  2. #2
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,361
    Thanks
    30
    Thanked 139 Times in 134 Posts
    Blog Entries
    32

    Default

    There's no occurrence of onclick=.... The HTML-file only has href=..., which does not require javascript (enabled). Unfortunately, it is not explained how the css must be modified in such a way that the images are only enlarged when they are clicked on.
    Arie.

    Edit:
    I found a solution. We should replace all occurrences of hover (in the css-file) with focus, see this thread.

    ===
    Last edited by molendijk; 08-21-2012 at 11:34 PM. Reason: Correction in text

  3. #3
    Join Date
    Apr 2013
    Posts
    18
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    I was able to get on click by changing hover to active in all instances of the css.

  4. #4
    Join Date
    Apr 2013
    Posts
    18
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    One thing I forgot to mention is the .thumbnail:active tag the image image will only stay visible while you are holding down the mouse button. If you have to have it stay visible until you click on it to make it disappear or to see another image then at the end of the CSS code you need to add:

    .thumbnail:focus span {
    visibility: visible;
    }
    Just above the </style> tag.

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
  •