Question

我在FancyBox 2中使用标题标题。我从这里抓取代码：http://jsfiddle.net/vkDcG/

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

工作正常。我想将图像从弹性变为淡入淡出代码取自此处：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'  
    }  
}  
}  
    });  
});

当我添加淡入淡出过渡时，不会使用标题文本，但它默认为标题文本（我正在使用其他内容）。有点难过为什么这不起作用。任何帮助将不胜感激。

这是我的代码：

$(".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');  
}  
});

Answer 1

如果添加新的API选项，则需要使用逗号分隔每个选项，但最后一个。

您添加了title : null，但忘记添加尾随逗号，以便触发js错误，其余选项将无效。

实际上你根本不需要那个选项，因为你用回调中的title属性覆盖了caption内容，所以这段代码运行得很好：

$(".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');
    }
});

检查 JSFIDDLE

在FancyBox2中使用标题和淡入淡出的图像

1 个答案: