Advanced Search

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

Thread: Clickable Image Gallery

  1. #1
    Join Date
    Aug 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Clickable Image Gallery

    Hi everyone,

    I really like this gallery here in all ways except two: is there any way to make this "clickable", ie you have to click on the image to make it appear rather than just hover the mouse over it? Secondly is it also possible to have it automatically show a picture when the gallery first loads?

    I'd really like to implement this on my website but so far I'm not having any luck changing it from a "hover" gallery to a "click" gallery :-(

    Thanks for any advice!

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,704
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    You can't do click with css alone. Here's some nice javascript scripts/galleries that use click:

    http://www.dynamicdrive.com/dynamici...agemagnify.htm

    http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm

    http://www.dynamicdrive.com/dynamici...thumbnail2.htm

    They can all be made to display a larger image on page load. But, as this varies from script to script - how it's done, pick one and then we can work that part out.
    - John
    ________________________

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

  3. #3
    Join Date
    Aug 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks John. Well, to be honest all I want is to click on these images to show the big version - I don't mind using JavaScript if that's the way to go although I don't know much so will need to learn from the beginning.

    The gallery in the link is laid out exactly how I want it; I just need to add the functionality so that when the thumbnail is clicked the larger version is shown (and hovering over the image does nothing), plus have the first picture shown automatically (which by the looks of it is achieved using the command <BODY onload="callJavaScriptFunction(picNumber)">)

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,704
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    I gave you 3 options. Which if any did you like? Decide that and we can set this up. The first thing to do would be to install the script as per the instructions on its demo page. Then give me the link to that page, I will set it up so you can have the first one enlarged by default.
    - John
    ________________________

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

  5. #5
    Join Date
    Aug 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I don't like any of them really - this is the one I'm interested in: http://www.dynamicdrive.com/style/cs...image-gallery/

    At the bottom of the article it says "Furthermore, it's possible to modify the behavior so the enlarged images are only shown onClick...." - this is what I'm trying to do.

    Thanks for your offer of help though, much appreciated :-)

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,704
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    I don't think that's possible, not without javascript. There's no documentation for it either. There might be a way using CSS 3 though. I've opened a thread on it, let's see if we get any answers. However, this script:

    http://www.dynamicdrive.com/dynamici...thumbnail2.htm

    Is virtually identical and has an onclick option that does work.
    Last edited by jscheuer1; 08-21-2012 at 05:36 PM. Reason: detail
    - John
    ________________________

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

  7. #7
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,297
    Thanks
    28
    Thanked 135 Times in 130 Posts
    Blog Entries
    28

    Default

    Yes, it's possible with css alone (provided we don't consider href=... as javascript).
    Here's a rough example:
    Code:
    <style>
    #from_small_to_big {display: none;}
    #from_small_to_big:target {display: block;}
    </style>
    
    <div id="from_small_to_big" style="position:relative; left:200px">
    <a href="#">Show small image<br>
    <img src="http://www.dynamicdrive.com/cssexamples/media/tree.jpg"></a>
    </div>
    <a href="#from_small_to_big">Show big image<br><img src="http://www.dynamicdrive.com/cssexamples/media/tree_thumb.jpg"></a>
    Arie.

  8. #8
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,297
    Thanks
    28
    Thanked 135 Times in 130 Posts
    Blog Entries
    28

    Default

    The solution I proposed above is not very good. I found a way to do it, based on the DD script itself. In the css, we simply should replace all occurrences of hover with focus. That does it.
    Example:
    Code:
    <style type="text/css">
    
    .gallerycontainer{
    position: relative;
    /*Add a height attribute and set to largest image's height to prevent overlaying*/
    }
    
    .thumbnail img{
    border: 1px solid white;
    margin: 0 5px 5px 0;
    }
    
    .thumbnail:focus{
    background-color: transparent;
    }
    
    .thumbnail:focus img{
    border: 1px solid blue;
    }
    
    .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;
    }
    
    .thumbnail span img{ /*CSS for enlarged image*/
    border-width: 0;
    padding: 2px;
    }
    
    .thumbnail:focus span{ /*CSS for enlarged image*/
    visibility: visible;
    top: 0;
    left: 230px; /*position where enlarged image should offset horizontally */
    z-index: 50;
    }
    
    </style>
    
    <div class="gallerycontainer">
    
    <a class="thumbnail" href="#thumb"><img src="http://www.dynamicdrive.com/cssexamples/media/tree_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="http://www.dynamicdrive.com/cssexamples/media/tree.jpg" /><br />Simply beautiful.</span></a>
    
    <a class="thumbnail" href="#thumb"><img src="http://www.dynamicdrive.com/cssexamples/media/ocean_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="http://www.dynamicdrive.com/cssexamples/media/ocean.jpg" /><br />So real, it's unreal. Or is it?</span></a>
    
    <br />
    
    <a class="thumbnail" href="#thumb"><img src="http://www.dynamicdrive.com/cssexamples/media/sushi2_thumb.jpg" width="100px" height="75px" border="0" /><span><img src="http://www.dynamicdrive.com/cssexamples/media/sushi2.jpg" /><br />Sushi for dinner anyone?</span></a> 
    
    <a class="thumbnail" href="#thumb"><img src="http://www.dynamicdrive.com/cssexamples/media/horses_thumb.jpg" width="100px" height="70px" border="0" /><span><img src="http://www.dynamicdrive.com/cssexamples/media/horses.jpg" /><br />Run wild with horses.</span></a>
    
    <br />
    
    </div>
    Arie.

  9. The Following User Says Thank You to molendijk For This Useful Post:

    jscheuer1 (08-22-2012)

  10. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,704
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    Thanks Arie. That does do it, for IE and Firefox. I found that in Chrome though we need to use a javascript assist to get the click to confer focus on the link. So in addition to your excellent suggestion above, we also need to change the links from:

    Code:
    <a class="thumbnail" href="#thumb">
    to:

    Code:
    <a class="thumbnail" href="javascript:void(0);" onclick="this.focus(); return false;">
    If you want one displayed as the page loads, you can add a unique id to it, ex:

    Code:
    <a id="first" class="thumbnail" href="javascript:void(0);" onclick="this.focus(); return false;">
    And then at the bottom of the page, just before the closing </body> tag, add the highlighted as shown:

    Code:
    <script type="text/javascript">
    document.getElementById('first').focus();
    </script>
    </body>
    </html>
    - John
    ________________________

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

  11. The Following User Says Thank You to jscheuer1 For This Useful Post:

    rexi (08-22-2012)

  12. #10
    Join Date
    Aug 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Wow guys.... awesome! Really, really appreciate your help, thanks :-)

    I was just wondering.... when you click on the image (or off it for that matter) it will disappear. This is absolutely not a problem but my inquisitve mind is wondering why this is happening, and is there a way to get around it?

    On another note, would you guys be able to recommend any Javascript tutorials/resources starting from first principles? Or books for that matter? I know there are tons out there but just wondering if you know of any really good ones for complete beginners?
    Last edited by jscheuer1; 11-01-2012 at 08:17 AM. Reason: merge

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
  •