Image showing when hover over thumbnail , not when thumbnail is clicked

SD1990 · 17-06-2009 11:50AM #1

Hi all,

I have a CSS based gallery on a site i am doing and there is 10 thumbnails. When you hover over one of the thumbnails the picture is enlarged next to them. That all works fine. What i am trying to do is add an on click function that when you click the thumbnail that image stays displayed ( there is no image displayer when you are not hovering over a thumbnail )

Here is the code i have at the moment.

HTML

<a class="thumbnail" ><img src="bed1.jpg" width="100px" height="66px" name="pic1" border="0" /><span><img src="bed1.jpg" /><br />description</span></a>
 
<a class="thumbnail" href="#thumb"><img src="bed2.jpg" width="100px" height="66px" border="0" /><span><img src="bed2.jpg" /><br />description</span></a>
<br />

etc.

I am thinking something like onClick="showImage(document.getElementByName('pic1').src);" ?

here is the CSS code

.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:hover{
background-color: transparent;
}
.thumbnail:hover img{
border: 1px solid blue;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1500px;
border: 1px dashed gray;
color: black;
text-decoration: none;
visibility: visible;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 25px;
left: 270px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

Hydrosylator · 17-06-2009 12:42PM

I don't know much about Javascript, but I know what I like.
Floatbox will do what you want to do and then some, and also it's very tweakable.

I used it on my sisters photography website and it worked a treat.

I'm assuming you want to do something like this, though I could be wrong.

Also, it's worth bearing in mind that the :hover pseudo-class won't work for anything other than a link for most versions of Internet Explorer.

SD1990 · 17-06-2009 12:51PM

Thanks for reply.

But all i need is a small javascript fix to fix this problem.

A simple onclick function. But being clueless at javascript i cant work it out myself

ron_darrell · 17-06-2009 04:12PM

Ok this isn't exactly what you're looking for but with a little tweaking it should work ok.

<html>
<head>
<script>
	var cur_pic = "";
	var stay = false;
	var old_pic = "";
	
	function hover_pic(obj) {
		var tn_patt = /\/tn/;
		if(obj != null) {
			var my_path = obj.src;
			my_path = my_path.replace(tn_patt, "");
			cur_pic = my_path;
			document.getElementById('demo_window').innerHTML = "<img src='"+my_path+"' width='200' height='200' />";
		} else {
			if(old_pic.length > 0) {
				document.getElementById('demo_window').innerHTML = "<img src='"+old_pic+"' width='200' height='200' />";
			} else {
				document.getElementById('demo_window').innerHTML = "";
			}
		}
	}
	
	function stay_pic(obj) {
		var my_path = obj.src;
		var tn_patt = /\/tn/;
		my_path = my_path.replace(tn_patt, "");
		cur_pic = my_path;
		old_pic = my_path;
		document.getElementById('demo_window').innerHTML = "<img src='"+my_path+"' width='200' height='200' />";
	}
</script>
<style>
	.demo {
		width:		400px;
		height: 	400px;
		float:		left;
	}
</style>
</head>
<body>
<div id="demo_window" class="demo"></div>
<img src="img/tn/test1.jpg" width="100" height="100" onmouseout="hover_pic(null);" onmouseover="hover_pic(this);" onclick="stay_pic(this);" /><br />
<img src="img/tn/test2.jpg" width="100" height="100" onmouseout="hover_pic(null);" onmouseover="hover_pic(this);" onclick="stay_pic(this);" /><br />
<img src="img/tn/test3.jpg" width="100" height="100" onmouseout="hover_pic(null);" onmouseover="hover_pic(this);" onclick="stay_pic(this);" /><br />
<img src="img/tn/test4.jpg" width="100" height="100" onmouseout="hover_pic(null);" onmouseover="hover_pic(this);" onclick="stay_pic(this);" /><br />
<br/>
</body>
</html>

Enjoy.

RD

SD1990 · 17-06-2009 05:23PM

http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/

Thats where i got it from.

Want to click on the thumbnail and that image to stay up.

Any help appriciated.

Total javascript noob so trying to avoid that.

Liam Byrne · 18-06-2009 02:01PM

SD1990 wrote: »

http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/

Thats where i got it from.

Want to click on the thumbnail and that image to stay up.

Any help appriciated.

Total javascript noob so trying to avoid that.

It's using the css :hover pseudo class, which - based on it's name - is only applicable to hover.

Maybe some form of :active or :visited might work instead, but TBH that's killing the whole point of that gallery.

Since you're a newbie, maybe try one of the jQuery out-of-the-box extensions like lightbox instead ?

Image showing when hover over thumbnail , not when thumbnail is clicked

Comments