Question

Is there any way to perhaps add text in a Fancybox box rather than having to use the title attribute? To illustrate the problem I’m having, here’s one of the pictures displayed on my page which uses Fancybox:

http://dl.dropbox.com/u/12453703/fbox01.PNG

As you see, for the title attribute I have put in HTML so that the picture title is a link to a webpage. It looks good and it works just fine. However, the bad thing is, when I point to the thumbnail for the Fancybox, I get the raw HTML code:

http://dl.dropbox.com/u/12453703/fbox02.png

Is there some workaround for this? Have the HTML link in the enlarged image, but simply have text for the thumbnail tooltip which pops up? Or perhaps (as my title suggests), have some seperate text below the image which is seperate from the caption text?

(I didn’t find anything useful regarding this issue in the Fancybox docs but I could be wrong.)

Thanks.

• Edit, the code I’m using at the moment is quite simple:

$("a.single_image").fancybox(
{
    transitionIn: 'elastic',
    transitionOut: 'elastic',
    easingIn: 'easeInOutBack',
    easingOut: 'easeOutBack',
    speedIn: 300,
    speedOut: 300,
    cyclic: true    ,
    titlePosition: 'over',
});

Answer 1

Create a new attribute for your link, I will just call it rel:

<a href="myimg.jpg" class="single_image" rel="My Title"><img src="myimg.jpg" /></a>

$("a.single_image").each(function(){
    $(this).fancybox({
        transitionIn: 'elastic',
        transitionOut: 'elastic',
        easingIn: 'easeInOutBack',
        easingOut: 'easeOutBack',
        speedIn: 300,
        speedOut: 300,
        cyclic: true    ,
        titlePosition: 'over',
        title:  $(this).attr('rel')
    });
})