jscheuer1

The title overstates the point. Both these scripts in their latest versions are pretty darn good as are many of the other Lightbox type scripts out there (see end for two others or Google Lightbox for more, though not all are as good as those mentioned here, many including the original Lightbox mentioned in the title of this blog entry are).

Here's the real story -

Some time ago Dynamic Drive's Lightbox by Lokesh Dhakar was added to the Dynamic Drive official scripts. It uses the Prototype/Scriptaculous script libraries.

However, since then so many of the scripts on Dynamic Drive now use the jQuery script library. And more are being converted over to it. Lightbox can be made to work on pages with jQuery based scripts, but it's often difficult. It can require updates to Lightbox, and is finicky even when it does not.

Slimbox2:

http://www.digitalia.be/software/slimbox2

does almost everything the Lightbox version from Dynamic Drive does, and it's based on jQuery so it's better for use on pages already using the jQuery library. The only thing it doesn't have is the linked title option added to the DD version by Dynamic Drive, and that may be added easily to Slimbox2.

When using only jQuery based scripts on a page, it greatly cuts down on potential conflicts and also saves time and bandwidth for the page. Just be sure to use only one version of jQuery on the page. Ideally, and in most cases you only need one external script tag for it for the entire page, placed before all the other scripts that use jQuery.

For even more flexibility with Slimbox2, surpassing even the latest Lightbox version (Lightbox 2.05 at this writing), you may use your own code block for loading, replacing its native "AUTOLOAD CODE BLOCK".

Here's one that gives Slimbox2 a few new powers:

Code:

// Live invocation for use with other scripts, image maps, AJAX, etc. - also skips duplicates when forming groups
// Uses the rev attribute of the tag for a caption, freeing up the title for other uses or to be blank.
// Remove the AUTOLOAD CODE BLOCK if using this, or replace it with this code.
// Live Load Script (c)2011 John Davenport Scheuer - for use with Slimbox 2.04 or 2.05, jQuery 1.7 or less
// as first seen in http://www.dynamicdrive.com/forums/
// username: jscheuer1 - This Notice Must Remain for Legal Use
(function($){
	if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
		$('*[href][rel^=lightbox]').live('click', function(e){
			var t = this, rel = t.getAttribute('rel'), hrefs = [], links = [], index;
			if(rel === 'lightbox'){
				$.slimbox(t.href, t.getAttribute('rev') || '', { /* Options */ });
			} else {
				$('*[href][rel="' + rel + '"]').each(function(){
					if($.inArray(this.href, hrefs) < 0){
						if(t.href === this.href){index = hrefs.length;}
						hrefs.push(this.href);
						links.push([this.href, this.getAttribute('rev') || '']);
					}
				});
				$.slimbox(links, index, {loop: true /* , Aditional Options */ });
			}
			e.preventDefault();
		});
	}
})(jQuery);

• It will work on rel="lightbox" and rel="lightbox[groupname]" links, even if they are imported to the page after page load. This makes it good with AJAX and with scripts that change the DOM after it's loaded.
  
  
• It uses the rev attribute of the link for the title/caption, so complex HTML may be used without unsightly tool tips appearing on hover of the lightbox link, ex:
  
  
  HTML Code:

  <a href="some.jpg" rel="lightbox" rev="my caption">Whatever</a>

• It also, when the rel="lightbox[groupname]" syntax is used, allows for looping back to the beginning from the end and visa versa. This may be turned off by setting the red true in the above to false.
  
  
• It effectively removes duplicate images from groups by never including them in the first place. Lightbox is supposed to do this, but stopped working in that regard a few versions back.

If you want even more flexibility and know jQuery, you can come up with your own code blocks for loading Slimbox2, or use something like ColorBox or FancyBox which have the ability to show other types of content, from the page or external on site pages, even from around the web. And they're also jQuery based.

Comments are welcome but will be held back until I have a chance to check them for spam or requests for help. If you want help with this, please post in the forum and refer back to this blog entry. Use a title for your post that includes the word Slimbox or Lightbox.

For newer versions (1.9+) of jQuery the live() method is no longer directly supported. If using one of theses, here's an updated version of the above autoload code (older jQuery 1.7 and less are best used with the older code above):

Code:

// Live invocation for use with other scripts, image maps, AJAX, etc. - also skips duplicates when forming groups
// Uses the rev attribute of the tag for a caption, freeing up the title for other uses or to be blank.
// Remove the AUTOLOAD CODE BLOCK if using this, or replace it with this code.
// Live Load Script (c)2011 John Davenport Scheuer - for use with Slimbox 2.04 or 2.05, jQuery 1.8+
// as first seen in http://www.dynamicdrive.com/forums/
// username: jscheuer1 - This Notice Must Remain for Legal Use
(function($){
	if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
		$(document).on('click', '*[href][rel^=lightbox]', function(e){
			var t = this, rel = t.getAttribute('rel'), hrefs = [], links = [], index;
			if(rel === 'lightbox'){
				$.slimbox(t.href, t.getAttribute('rev') || '', { /* Options */ });
			} else {
				$('*[href][rel="' + rel + '"]').each(function(){
					if($.inArray(this.href, hrefs) < 0){
						if(t.href === this.href){index = hrefs.length;}
						hrefs.push(this.href);
						links.push([this.href, this.getAttribute('rev') || '']);
					}
				});
				$.slimbox(links, index, {loop: true /* , Aditional Options */ });
			}
			e.preventDefault();
		});
	}
})(jQuery);