Question

I am setting the title attribute of an element, and firing Fancybox, using this code:

var caption = jQuery('.fancybox').siblings('p.wp-caption-text').html();

jQuery('.fancybox').attr({ title:caption, 'data-fancybox-group': 'gallery1'}).fancybox();

This works fine when there is only one .fancybox link on a page, but the problem of course is that I want to use galleries.

The above sets the variable to the first instance on the page, so all captions are the same.

Can I do something like this instead?:

jQuery('.fancybox').attr({ title:'jQuery(this).siblings('p.wp-caption-text').html();', 'data-fancybox-group': 'gallery1'}).fancybox();

Please excuse my lack of coding skills, but I am hoping it is a simple question for someone more familiar with jQuery.

The page in progress: http://professorleonidas.com/wordpress/formacao/

Answer 1

Apply to each one individually:

var caption;
$('.fancybox').each(function(i, elem){
    // Grab the caption text
    caption = $(elem).siblings('p.wp-caption-text').html();

    // Set the attributes and initialize fancybox
    $(elem).attr({ title:caption, 'data-fancybox-group': 'gallery1'}).fancybox();
});

The point of your ‘data-fancybox-group’ attribute isn’t clear from your question, but the above code will apply gallery1 as its value to all matched elements with class fancybox.

Cheers