Image Captions

112 views
Skip to first unread message

CrystalSC

unread,
Jul 1, 2009, 3:01:29 PM7/1/09
to facebox
I would like to add a caption to the images that appear in my facebox
popups. Can someone tell me how to add this? Thank you!

Jonny Stephens

unread,
Jul 1, 2009, 5:01:40 PM7/1/09
to facebox
Search this group for "caption".

On Jul 1, 8:01 pm, CrystalSC <emailcrysta...@gmail.com> wrote:
> I would like to add a caption to the images that appear in my facebox
> popups. Can someone tell me how to add this? Thank you!ch

CrystalSC

unread,
Aug 4, 2009, 5:03:46 PM8/4/09
to facebox
Thank you! :)
> > popups. Can someone tell me how to add this? Thank you!ch- Hide quoted text -
>
> - Show quoted text -

KingSky

unread,
Aug 20, 2009, 3:45:50 PM8/20/09
to facebox
Hmm... I search for 'caption', and 'captions', and this thread is the
only result.

On Jul 1, 4:01 pm, Jonny Stephens <goo...@bloog.co.uk> wrote:
> Search this group for "caption".
>
> On Jul 1, 8:01 pm, CrystalSC <emailcrysta...@gmail.com> wrote:
>
>
>
> > I would like to add acaptionto the images that appear in my facebox

Jonny Stephens

unread,
Aug 21, 2009, 6:49:52 AM8/21/09
to facebox
The original post probably now falls outside the search timeframe.
Here's a condensed version.

Tested with Facebox 1.2, jQuery 1.2.6, IE6/7, Firefox 3, Safari 3.2.1.

Add the attribute rel="facebox-cap" to anchors containing the images
you want to caption, and put the caption text in the title attribute.
e.g.

<a href="image.jpg" rel="facebox-cap" title="Caption text">Link text
or image element</a>

Attach Facebox in the page with:

<script type="text/javascript">

$(document).ready(function() {
$('a[rel*=facebox]').facebox();
$('a[rel*=facebox-cap]').mousedown(function() {
var caption = $(this).attr('title');
$().one('reveal.facebox', function() {
$('<p class="caption">' + caption + '</p>').appendTo
('.content');
});
});
});

</script>

The CSS selector for styling the caption:

#facebox p.caption

Hope this helps.
Reply all
Reply to author
Forward
0 new messages