Using a caption and fading images in FancyBox2

Question

I am using a caption for a title in FancyBox 2. I grabbed the code from here: http://jsfiddle.net/vkDcG/

$(".fancybox")  
.attr('rel', 'gallery')  
.fancybox({  
beforeLoad: function() {  
this.title = $(this.element).attr('caption');  
}  
});

It works fine. I want to change the image transitions from elastic to fade.
Code taken from here: Links within caption on Fancybox 2.

 $(document).ready(function() {  
    $(".fancybox").fancybox({  
    openEffect  : 'fade',  
    closeEffect : 'fade',  
    nextEffect  : 'fade',  
    prevEffect  : 'fade',  
    helpers : {  
    title : {  
    type : 'inside'  
    },  
    overlay : {  
    css : {  
    'background-color' : '#eee'  
    }  
}  
}  
    });  
});

When I add the fade transition, the caption text is not used but it defaults to the title text (which I am using for something else). Kinda stumped as to why this is not working. Any help would greatly be appreciated.

Here is my code:

$(".fancybox")  
.fancybox({  
openEffect  : 'fade',  
closeEffect : 'fade',  
nextEffect  : 'fade',  
prevEffect  : 'fade',  
helpers : {  
title : null  
overlay : {  
css : {  
'background-color' : '#4a4a4a'  
}  
}  
},  
beforeLoad: function() {  
this.title = $(this.element).attr('caption');  
}  
});

score 0 · Accepted Answer · answered Jun 04 '13 at 17:34

If you add a new API option, then you need to separate each of them with a comma but the last.

You added title : null but forgot to add the trailing comma so that triggers a js error and the rest of the options won't work.

Actually you don't need that option at all since you are overriding the title content with the caption attribute inside the callback, so this code works just fine :

$(".fancybox")
    .attr('rel', 'gallery')
    .fancybox({
    openEffect: 'fade',
    closeEffect: 'fade',
    nextEffect: 'fade',
    prevEffect: 'fade',
    helpers: {
        // title: null // you don't need this one
        overlay: {
            css: {
                'background-color': '#4a4a4a'
            }
        }
    },
    beforeLoad: function () {
        this.title = $(this.element).attr('caption');
    }
});

Check JSFIDDLE

Using a caption and fading images in FancyBox2

1 Answers1