Adding captions using fancybox

[kuba2]

Hello there
 
Can anybody tell me how I can add captions to the images in my photo gallery using fancybox?
 
I thought I could use the description field, but can't figure that one out.

Like this:

title='{$thumbnail->description}'

My code for the image gallery:

    <?php

foreach($page->bildergalerie as $image) {
    $thumbnail = $image->size(180,180);
    echo "<a href='{$image->url}'  class='fancybox' rel='group'><img src='{$thumbnail->url}' alt='{$thumbnail->description}'  ></a>";
}

?>

Thanks a lot

Kuba

 

[Martijn Geerts]

This is more of a Fancybox question than a ProcessWire one. But something along the below lines might work. Be aware that it is not tested.

$(document).ready(function () {
    $(".fancybox").fancybox({
        helpers : {
            title: { type: 'inside'}
        },
        afterLoad: function () {
             this.title = $(this.element).find('img').attr('alt');
        }
    });
});

[kuba2]

Thank you for the response

I got it working!

Put this in the <a> tag

title='{$thumbnail->description}'

       <?php

foreach($page->bildergalerie as $image) {
    $thumbnail = $image->size(180,180);
    echo "<a href='{$image->url}'  class='fancybox' rel='group' title='{$thumbnail->description}'><img src='{$thumbnail->url}' alt='{$thumbnail->description}'  ></a>";
}

?>

[Marty Walker]

You might be better off using something like Lightcase (http://cornel.bopp-art.com/lightcase/) or Photoswipe (http://photoswipe.com/). Both are easier to configure when it comes to captions.