Clickable Image Gallery

[jscheuer1]

That happens because the core functionality of the gallery is now focus. When you focus elsewhere, the trigger loses focus.

The more you modify this, the more dependent upon javascript it becomes. Consider using:

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

in its click mode. It has all that you say you want and optionally more.

However, to prevent the images from disappearing when they or their descriptions (if any) in their spans are clicked, you may add this code (highlighted) where we had the bit that loads the first image:

<script type="text/javascript">
document.getElementById('first').focus();
(function(){
	var thumbtriggers = document.getElementsByTagName('a'), i = thumbtriggers.length;
	while(--i > -1){
		if(thumbtriggers[i].className === 'thumbnail'){
			(function(i){
				var children = thumbtriggers[i].getElementsByTagName('*'), j = children.length;
				while(--j > -1){children[j].onmousedown = function(){setTimeout(function(){thumbtriggers[i].focus();}, 0);};}
			})(i);
		}
	}
})();
</script>
</body>
</html>

I'm not sure if there's any way to prevent them from disappearing when clicking outside the images and/or descriptions (if any) in the spans. Probably, but it would be complicated because if there were links outside to other pages, you would want those to work. And you would need to save the active thumbnail to know where to maintain/return focus to.

With just the above, it occurs to me that you would probably want to add to the css:

.thumbnail, .thumbnail * {outline-style: none;}
.thumbnail span {cursor: text;}
.thumbnail span img {cursor: default;}

One nice thing about going with this using javascript to augment it is that for those few users without javascript enabled, it will still retain the basic functionality of showing a larger image onclick. All the other frills we've just been discussing would be lost to them though, including the loading of the first image.

Or You can try this - Get rid of the script we added altogether, and get rid of all of the individual onclick events for the thumbnails. Add this code in the head of the page:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
	var activetrigger = document.getElementById('first');
	function loadactive(){activetrigger.focus();}
	loadactive();
	$('.thumbnail').bind('focus click', function(e){
		if(e.type === 'click'){this.focus();}
		activetrigger = this;
		e.preventDefault();
	});
	$(document).mousedown(function(){setTimeout(loadactive, 0);});
});
</script>

That seems to take care of everything and still allows normal links on the page to work. You will still probably want to add the css as mentioned above.

[Adrian]

Thanks John, that's brilliant.

[ag1539]

Stumbled upon this forum and have found it quite helpful. I'm curious about the possibility of making the main enlarged image a hyperlink. I can't seem to think of a pure HTML/CSS way to do this, since it would be a link within a link. Is this a possibility with javascript?

[jscheuer1]

If you're using the jQuery method, change this:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
	var activetrigger = document.getElementById('first');
	function loadactive(){activetrigger.focus();}
	loadactive();
	$('.thumbnail').bind('focus click', function(e){
		if(e.type === 'click'){this.focus();}
		activetrigger = this;
		e.preventDefault();
	});
	$(document).mousedown(function(){setTimeout(loadactive, 0);});
});
</script>

to:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
	var activetrigger = document.getElementById('first');
	function loadactive(){activetrigger.focus();}
	loadactive();
	$('.thumbnail').bind('focus click', function(e){
		if(e.type === 'click'){
			this.focus();
			if(this.getAttribute('data-href') && ($(e.target).parent('span').size() || e.target.nodeName === 'SPAN')){
				return true;
			}
		}
		activetrigger = this;
		e.preventDefault();
	}).filter('[data-href]').each(function(){
		this.href = this.getAttribute('data-href');
	}).find('span, span img').css({cursor: 'pointer'});
	$(document).mousedown(function(){setTimeout(loadactive, 0);});
});
</script>

That enables you to add into the markup things like (addition highlighted):

<a class="thumbnail" href="javascript:void(0);" data-href="http://www.google.com/"><img src="index_files/201_002.jpg" border="0" height="75px" width="120px"><span><img src="index_files/201.jpg"><br> </span></a>

You can use a target attribute too if you like:

<a class="thumbnail" href="javascript:void(0);" data-href="http://www.dynamicdrive.com/" target="_blank"><img src="index_files/249_002.jpg" border="0" height="75px" width="120px"><span><img src="index_files/249.jpg"><br>Sushi for dinner anyone?</span></a>

For non-javascript enabled browsers there will be no link. For folks with javascript it will fire only onclick of the larger image.

It could be done using the actual href, but then non-javascript users couldn't click to see the larger image. What might work best is to have the gallery work on click for javascript users and on hover for non-javascript users. That way the link could be the href and would work as desired in javascript and would work in non-javascript for both the small and large image, while those users could see the large image on hover. If you want it like that, let me know.

[ag1539]

Wow, John, thank you so much for your help. In working on the site design in which this will be utilized, I realized the best thing may not be having the whole image itself work as a hyperlink, but putting a text-based hyperlink in the caption ("lorem ipsum...Click here for enlargement"), as not all images will need further enlargements. Is that even a possibility?

Again, thank you so much. This is a wonderful resource.

[jscheuer1]

What do you mean? You want to hyperlink the caption of the larger image but not the larger image nor its thumbnail? If so you could use code like so:

jQuery(function($){
	var activetrigger = document.getElementById('first');
	function loadactive(){activetrigger.focus();}
	loadactive();
	$('.thumbnail').bind('focus click', function(e){
		if(e.type === 'click'){
			this.focus();
			if(this.getAttribute('data-href') && e.target.nodeName === 'SPAN'){
				return true;
			}
		}
		activetrigger = this;
		e.preventDefault();
	}).filter('[data-href]').each(function(){
		this.href = this.getAttribute('data-href');
	}).find('span').css({cursor: 'pointer'});
	$(document).mousedown(function(){setTimeout(loadactive, 0);});
});

and have markup like this:

<a class="thumbnail" href="javascript:void(0);" data-href="http://www.google.com/">
<img src="index_files/201_002.jpg" border="0" height="75px" width="120px"><span><img src="index_files/201.jpg">
<br>lorem ipsum...Click here for enlargement</span></a>

[ag1539]

Thank you for your help, John. I'm still having issues, which I assume is due to trying to combine two script commands (the thumbnail image gallery and a lightbox feature). My client wants the image gallery feature with some further enlargements that open in a popup window. All of your scripting commands work perfectly until I put the lightbox "rel" attribute into the href. When I put this attribute in, the popup opens upon a click on the thumbnail. I don't know if I'm trying to combine too many script command features, or if there's an elegant way to do this. Here is the page on which I've been testing things. http://shelbygeorgis.com/cheryl/test.html

[jscheuer1]

Do you have to use that lightbox? I mean there are many others to choose from and that one doesn't look all that great with the rest of the page's design, and I'm not all that familiar with the one you're using. GreyBox, right? In any case, what can and probably needs to be done is have the lightbox listen for clicks on the page. If the click is on something you want put in the lightbox from a spot where you want to launch the lightbox from, then and only then will it open. Doing it in that way, the two scripts can operate more or less independently from each other. Oh and do you need to launch a page in the lightbox like I see you trying there, or will an image do?

I have few other lightbox type scripts in mind. It would be somewhat dependent though upon your answers to the above questions. In the meantime I'll have a closer look at GreyBox to see what it can do visa vis listening for clicks. Oh and another approach is to have an event that launches the lightbox and tie that to whatever you want to trigger it.

Both of these approaches avoid the problems that arise in most of the lightbox scripts when you try to use their basic link approach in an even slightly different way than the author assumes. Most of them have other ways or can be made to have other ways. It depends upon how flexible they are and/or upon how much work is involved to get them to be flexible if they're not.

[ag1539]

Thank you, John. I do not have to use Greybox, it's just one that I had used in the past. But if you have other scripts in mind, those will surely suffice. The lightbox does not have to have a page, an image will do. But navigable images within the lightbox will suffice.

This has been very helpful, and I will be happy to make a further, bigger donation if/when we get this figured out and working well. I am appreciative of your help and the promptness of your replies.

[jscheuer1]

Well, GreyBox will work. There are a few ways one can go with it. What I did was use this code in the head:

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Image Gallery Enhanced w/jQuery and GreyBox</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" title="hovercss" href="index_files/gallerynoscript.css" type="text/css">
<link rel="alternate stylesheet" title="focuscss" href="index_files/gallery.css" type="text/css">
<link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
    var GB_ROOT_DIR = "greybox/";
</script>
<script type="text/javascript" src="greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/gb_scripts.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
(function($){
	var iever = /MSIE (\d+)/.exec(navigator.userAgent), linkset = [], imageset = [],
		imgre = /\.(jpg|jpeg|gif|bmp|png)($|#|\?)/i, ie7 = true;
	if(!iever || iever[1] > 7){
		$('link[title="focuscss"]').get(0).disabled = true;
		$('link[title="hovercss"]').get(0).disabled = true;
		$('link[title="focuscss"]').get(0).disabled = false;
		ie7 = false;
	}
	$(function(){
		var activetrigger = document.getElementById('first');
		function loadactive(){activetrigger.focus();}
		!ie7 && loadactive();
		$('.thumbnail').bind('focus click', function(e){
			if(e.type === 'click'){
				this.focus();
				if(ie7 || this.href !== 'javascript:void(0);' && e.target.nodeName === 'SPAN'){
					if(imgre.test(this.href)){
						GB_showImageSet(imageset, this.getAttribute('data-index'));
					} else if(this.getAttribute('data-index')) {
						GB_showFullScreenSet(linkset, this.getAttribute('data-index'));
					}
				}
			}
			activetrigger = this;
			e.preventDefault();
		}).not('[href="javascript:void(0);"]').find('span').css({cursor: 'pointer'}).end().each(function(){
			if(imgre.test(this.href)){
				imageset.push({caption: this.getAttribute('data-title') || this.title || '', url: this.href});
				this.setAttribute('data-index', imageset.length);
			} else {
				linkset.push({caption: this.getAttribute('data-title') || this.title || '', url: this.href});
				this.setAttribute('data-index', linkset.length);
			}
		});
		!ie7 && $(document).mousedown(function(){setTimeout(loadactive, 0);});
	});
})(jQuery);
</script>
</head>

The two stylesheets with highlights in their link tags are exactly the same except that the one with the title 'hovercss' has the :focus pseudo selectors for the thumbnail gallery changed to :hover pseudo selectors (see * below for more explanation). If javascript is disabled or IE 7 or less is used, these (hovercss) rules will be used. Otherwise the script swaps them and the 'focuscss' rules are used. This gives maximum utility under various circumstances.

I chose to allow either or both of image sets or link sets but kept them separate. If you have only one or the other, only those will be used. The script can tell which by the href attribute of the link. So if you have a link like so (do not use the rel attribute for any of these):

<a class="thumbnail" href="index_files/238_002.jpg">

It will go into the image set. Any href (case insensitive) ending in .jpg, .jpeg, .gif, .bmp and .png will go into the image set. If you have a link like this:

<a class="thumbnail" href="somepage.htm">

with any other extension, or no extension, like to a folder or a domain, it will go into the link set.

A link like this will be ignored by GreyBox but still act normally as a thumbnail gallery trigger:

<a class="thumbnail" href="javascript:void(0);">

It must use that exact syntax for its href though.

Once you've setup your thumbnails how you want them. The GreyBox ones will activate their greybox only on the text in the larger image span section of that thumnail, except in IE 7 and less, which cannot handle the focus gallery. There it will activate on click of the thumbnail, and the thumbnail gallery will work as a hover gallery. For non-javascript enabled browsers, they too will get a hover gallery and can click on the links to load the page or image directly into the browser.

You can add things to the thumbnail links.

You can give some or all of them a target attribute. That will only be used by non-javascript browsers and can be used to have them open a new tab or window, and/or to target an iframe in a noscript tag for what will be GreyBox links for all other browsers.

You can give some or all of them a data-title attribute:

<a class="thumbnail" href="http://www.javascriptkit.com/" data-title="Javascript Kit">

That will be used as the title/caption in the greybox. Or you can use just a title attribute for the same thing. But a title attribute shows on hover of all parts of the thumbnail including its contained span and larger image, so it's unsightly in many cases. You can do both and the data-title will override title in the greybox, but the actual title will show up when hovering the thumbnail and it's contained span and larger image. If you use neither, there will be no title/caption in the greybox and there will be no 'tooltip' on hover.

The ideal situation might be to use data-title on the thumbnail link and set a title attribute for the thumbnail image img tag. That will show the data-title only in the greybix and the img title only on hover of the thumbnail image:

<a class="thumbnail" href="http://www.javascriptkit.com/" data-title="Javascript Kit DOT Com"><img src="some_thumb.jpg" alt="" title="Some Title"> . . .

That's pretty much it. Any questions just ask.


*Your stylesheet is /cheryl/cheryl.css so you would change it in three places:

.thumbnail:focus{
background-color: transparent;
}

.thumbnail:focus img{
border: 1px solid #000;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
left: -1000px;;
visibility: hidden;
color: black;
text-decoration: none;
}

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

.thumbnail:focus span{ /*CSS for enlarged image*/
visibility: visible;
top: 115px;
left: 110px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

making those :hover and save that as - say /cheryl/cherylnoscript.css, then your stylesheet links in the head would be:

<link rel="stylesheet" title="hovercss" href="/cheryl/cherylnoscript.css" type="text/css">
<link rel="alternate stylesheet" title="focuscss" href="/cheryl/cheryl.css" type="text/css">