Fancybox Rule Conflict

Question

This rule uses the alt attribute for captions:

$(".fancybox").fancybox({
beforeShow : function() {
    var alt = this.element.find('img').attr('alt');

    this.inner.find('img').attr('alt', alt);

    this.title = alt;
}
});

This rule contains captions within the width of an image:

$(".fancybox").fancybox({
helpers : {
    title: {
        type: 'inside'
    }
}
});

Is there any way to get both rules to work simultaneously?

Fancybox automatically uses the title to produce captions for images. When text for intended captions is long, this makes for unsightly tooltips. I would like to use the alt for captions so that I can leave the title blank, and eliminate the tooltip altogether. Thanks in advance.

Answer 1

You could add as many API options (that you call rules) as you want within the same fancybox initialization script, separating them from each other with a comma like

jQuery(document).ready(function ($) {
    $(".fancybox").fancybox({
        // all your API options here
        beforeShow: function () {
            var alt = this.element.find('img').attr('alt');
            this.inner.find('img').attr('alt', alt);
            this.title = alt;
        },
        helpers: {
            title: {
                type: 'inside'
            }
        }
    });
}); // ready

See JSFIDDLE