CSS Popup Image Viewer - links inside?

**quadris** · 08-25-2010, 01:40 PM

1) Script Title: CSS Popup Image Viewer

2) Script URL (on DD): http://www.dynamicdrive.com/style/cs...ge-viewer/P10/

3) Describe problem: links into the popup?

I use this script and I love it !!! Very handy and very fast.
I'm looking to get links inside the popup working, I know that doesn't work now because the popup it self is a link.

Is there a way to get this working or are there other scripts possible for this?

**azoomer** · 08-25-2010, 08:01 PM

Not sure if you want the picture, the description or both to be active links, but have you tried something like this:

Code:

<a class="thumbnail" href="http://bbc.co.uk"><img src="media/tree_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/tree.jpg" /><br /><a href="http://cnn.com">Simply beautiful.</a></span></a>

edit: please disregard this post. I was wrong. Thanks for the info John.

**quadris** · 08-26-2010, 06:50 AM

thx for your answer :-)
I have a picture with the thumbnailer popup that show the picture in large+name and other info. I want other icons on the popup (wink, send message, etc,..)

I tried above code, but this gives an error in html since the <a> tag expects it to be closed.

**jscheuer1** · 08-26-2010, 07:56 AM

You can't have nested a anchor link tags. But the a anchor link in (from the demo page):

Code:

<a class="thumbnail" href="#thumb"><img src="media/tre . . . ul.</span></a>

Only needs to be an a anchor link to satisfy IE 6 and less which cannot show css hover effects on any other tag. So you could substitute span:

Code:

<span class="thumbnail"><img src="media/tre . . . ul.</span></span>

Then you could have links in there. It's just a question of whether or not you are willing to let go of IE 6. And it's not that it will look horrible in that browser, rather that there simply will be no pop up.

If it's really important to you to maintain that degree of backward compatibility as much as possible, javascript could be used to accommodate that browser. The javascript wouldn't be required by or necessarily even used or seen by modern browsers.

**quadris** · 08-26-2010, 09:12 AM

Thank you for the info and your answer :-)
What happens if I use the span in IE6? Will it just not show the popup, or will the content be placed next to the image link?

**jscheuer1** · 08-26-2010, 02:40 PM

What do you want? Use span and IE 6 will have no pop up. The additional links, info, images, whatever will not be seen.

This can be worked with. In my previous post I mentioned that javascript could fix that for IE 6. This could be done in such a way that other browsers wouldn't even see the javascript.

It also just occurred to me that one could use alternate content and/or styles to get IE 6 to at least show something, not on hover though.

Here's an example using just alternate styles:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.thumbnail{
position: relative;
z-index: 0;
cursor: pointer;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.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:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
}

b.trigger {
font-weight: normal;
}

</style>

<!--[if lt IE 7]>
<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.thumbnail{
position: static;
display: block;
cursor: default;
}

.thumbnail span{ /*CSS for enlarged image*/
position: static;
visibility: visible;
display: inline-block;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
display: block;
}

.trigger {
display: none;
}

</style>

<![endif]-->

</head>
<body>
<span class="thumbnail"><img class="trigger" 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></span>

<span class="thumbnail"><img class="trigger" 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></span>

<br />
<br />

<span class="thumbnail"><b class="trigger">Dynamic Drive</b><span><img src="http://www.dynamicdrive.com/cssexamples/media/dynamicdrive.gif" /><br />Dynamic Drive</span></span><br />
<span class="thumbnail"><b class="trigger">Zoka Coffee</b><span><img src="http://www.dynamicdrive.com/cssexamples/media/zoka.gif" /><br />Zoka Coffee</span></span>

</body>
</html>

Note: In addition to the IE conditional stylesheet, the existing markup and styles have been changed and added to slightly.

Here's a javascript method that mimics the functionality of all other browsers - the javascript will only be seen by IE 6:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.thumbnail{
position: relative;
z-index: 0;
cursor: pointer;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.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:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */

}

</style>

<!--[if IE 6]>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
	$('.thumbnail').hover(
		function(){
			$(this).css({zIndex: 50}).find('span').css({visibility: 'visible', top: 0, left: 60});
		},
		function(){
			$(this).css({zIndex: ''}).find('span').css({visibility: '', top: '', left: ''});
		}
	)
});
</script>
<![endif]-->

</head>
<body>
<span class="thumbnail"><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></span>

<span class="thumbnail"><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></span>

<br />
<br />

<span class="thumbnail">Dynamic Drive<span><img src="http://www.dynamicdrive.com/cssexamples/media/dynamicdrive.gif" /><br />Dynamic Drive</span></span><br />
<span class="thumbnail">Zoka Coffee<span><img src="http://www.dynamicdrive.com/cssexamples/media/zoka.gif" /><br />Zoka Coffee</span></span>

</body>
</html>

Same caveat as before, the existing markup and styles have also changed slightly in addition to the IE conditional.

Thread: CSS Popup Image Viewer - links inside?

Thread Tools

Search Thread

CSS Popup Image Viewer - links inside?

Bookmarks

Bookmarks

Posting Permissions