Add text underneath picture for lightbox 2.05

[windbrand]

Is it possible to add text under the opened picture for lightbox 2.05, like a description? Is it also possible to style the text (tables, lists, position, color, fonts, size, etc)? I have some photos that I put into a slideshow with lightbox 2.05, but I want to add some descriptive text to each photo, and I don't want to convert the text into an image.
This is the code for lightbox 2.05 to call the lightbox script for an image link:

<a href="pictures/eventposter.jpg" rel="lightbox">
	<img src="pictures/thumbnails/picthumbnails/oct25schedule.jpg" id="schedulethumb25">
</a>

Thanks.

[Link to lightbox 2.05]

[jscheuer1]

Lightbox 2.05 provides, as do all official Lightbox scripts from Lokesh Dhakar, for a caption. It's taken from the title attribute of the link:

<a href="pictures/eventposter.jpg" rel="lightbox" title="My Caption">
	<img src="pictures/thumbnails/picthumbnails/oct25schedule.jpg" id="schedulethumb25">
</a>

You can put rich HTML in there, but it will look pretty bad when someone hovers over the image. The title of the link will appear as a sort of tooltip for the image. This is standard behavior in almost every browser.

I'm not a big fan of Lightbox though. For what it does, it requires a tremendous amount of code and is a bit buggy. I do acknowledge that it was the first and launched countless imitators. Some of these aren't even as good as Lightbox, some are better. Some are way better.

If you're just looking for something that looks and feels like Lightbox but that's more efficient, less buggy, and that can do the sort of caption you want without the tooltip issue I just mentioned, use Slimbox2:

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

and use it the live invocation for it as presented here:

http://www.dynamicdrive.com/forums/blog.php?b=247

[windbrand]

Thanks for the reply.
I checked the demo for slimbox and it also has the caption when my mouse hovers over the link to the image... I have really limited knowledge on javascript, does the live load script you linked remove the tooltip popup?

[windbrand]

I tried inserting the javascript into autoload.js replacing the original, as well as placing it directly inside html, then changing "title" to "rev", but now the caption does not show...?

[jscheuer1]

OK, there's some confusion there. It depends upon which slimbox2.js you're using. If you're using the one from the js folder (which is best because most of it is minified), you need to edit it. Open it up in a plain text editor like NotePad. Inside it you will see:

/*
	Slimbox v2.04 - The ultimate lightweight Lightbox clone for jQuery
	(c) 2007-2010 Christophe Beyls <http://www.digitalia.be>
	MIT-style license.
*/
(function(w){var E=w(window),u,f,F=-1,n,x,D,v,y,L,r,m=! // Long line removed for brevity

// AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
	jQuery(function($) {
		$("a[rel^='lightbox']").slimbox({}, null, function(el) {
			return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
		});
	});
}

To save space I put in the green comment in place of the main part of the script which is all one long line. The highlighted part is the "AUTOLOAD CODE BLOCK". That's what you want to replace with the code from the blog:

// 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
// 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);

You don't need to put it on the page. Just link to the now edited copy of slimbox2.js using the external script tag. Use the rev attribute instead of the title attribute as you say you've already done.

So in the head of the page you should now have:

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
	<script type="text/javascript" src="js/slimbox2.js"></script>
	<link rel="stylesheet" href="css/slimbox2.css" type="text/css" media="screen" />

That's it!

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

[windbrand]

Thank you~ that worked. I was wondering if it's possible for it to have an auto-resize function similar to the modded lightbox2.05 by Fabian Lange? What it does is automatically resizes the image so it will fit into the current browser window.

[jscheuer1]

Slimbox presents the image as a background image, so no. A background image cannot be resized.

A good alternative would be FancyBox:

http://fancybox.net/

In fact, its default mode is to scale larger images down to fit. However, I snuck a peek at one of the discarded versions of your post where I think you mention that your images are too small at least in some cases. If what you want is to scale the images up, I'm not sure if any 'box' type script does that. Even if they did, scaling images up is much more prone to creating fuzziness or other artifacts in the image than is scaling down. We may be able to add padding though, to at least make room for the caption. Even slimbox may be able to do that.

And that other (resizing) Lightbox script is certainly an option. When we started this thread I had no idea you were interested in options beyond the regular Lightbox script other than rich HTML in the caption. That other Lightbox would probably still have the tooltip issue I mentioned before, but if you really like how it looks and need the resizing, we can probably hack it to use rev or something else.

So what exactly are you after?

[windbrand]

I have an assortment of images, some of them very large, and some of them are only icons (fictional company logos and stuff). For those small images, I wanted the rich text feature in slimbox so I can position the text accordingly (ie float to the right side of the small image), and for the large images I wanted to resize it so that both the picture itself and the text underneath it will fit on most browser windows.
But I guess a simple solution to the resizing is to simply resize my images in photoshop, which I did and it works ok. But I was wondering if there is any product that combines with lightbox and slimbox (resizing + richtext descriptions + no hovering tooltip).

[jscheuer1]

I think FancyBox:

http://fancybox.net/

can do all that. You may need some help setting it up for those purposes. If so, if I could have a link to a page, one with some of the not yet resized small images as well as some of the larger images that you want the script to resize, I could probably work it out. Include the captions. Like set it up with slimbox. For the smaller ones use the captions with the rich HTML that reposition the descriptions how you want them.