Question

I’m developing a WordPress theme and built the Fancybox lightbox plugin into my code. This works fine, except from one tiny problem.

But I’ll show you the code first, so it is easier to explain.

<dl class='gallery-item'>
    <dt class='gallery-icon'>
        <a href='image.jpg' title='something'><img width="150" height="150" src="image.jpg" class="attachment-thumbnail" title="something" /></a>
    </dt>
    <dd class='wp-caption-text gallery-caption'>
        Description, that should be displayed as title...
    </dd>
</dl>

This is the output of one gallery item of the WordPress standard gallery. What I want to do, is attaching the description in the dd-tags to the lightbox image title (at ht emoment the title of the a-tag is being displayed and that is an alphanumeric string – not very user friendly).

In order to assign something to the lightbox title, the following javascript has to be called in the initialization-function of the lightbox. (This code actually assigns the content of the first .wp-caption-text element to every single image title.)

$(document).ready(function(){
    $("a[href$='.jpg'],a[href$='.png'],a[href$='.gif']").attr('rel', 'gallery').fancybox({

    beforeLoad: function(){
        var caption = $('.wp-caption-text').html();
        this.title = caption;
        }
    });
});

The above code works as expected, but this means, that only the first element with the class wp-caption-text will be assigned to the lightbox and to every single image. But I want to get only the respective wp-caption-text for the image, that has been opened in the lightbox. So I will have to use something like $(this) and then navigate to the corresponding wp-caption-text and assign the text to the caption variable.

I’m struggling with the last point and hope, you can help me. This should not be too difficult, but I don’t have a clue at the moment.

Thanks
Lukas

Answer 1

This will be stable if the markup changes. If this doesn’t work it means that this isn’t quite what we expect it to be and we need to figure out what it is. Also notice that I’m using .text() instead of .html(). If you decide to add some markup inside of .wp-capition-text (for example, an icon or something), this will still just grab the text.

var caption = $(this.element).closest('.gallery-item').find('.wp-caption-text').text();