Clickable Image Gallery

**Adrian** · 08-20-2012, 10:53 AM

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!

**jscheuer1** · 08-20-2012, 08:59 PM

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.

**Adrian** · 08-21-2012, 09:52 AM

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)">)

**jscheuer1** · 08-21-2012, 02:02 PM

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.

**Adrian** · 08-21-2012, 03:43 PM

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 :-)

**jscheuer1** · 08-21-2012, 05:16 PM

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.

**molendijk** · 08-21-2012, 08:43 PM

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.

**molendijk** · 08-21-2012, 11:24 PM

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.

**jscheuer1** · 08-22-2012, 08:31 AM

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>

**Adrian** · 08-22-2012, 09:30 AM

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?