为fancybox图片/视频添加标题

Adding caption to fancybox images/video

本文关键字：添加 标题 视频 fancybox 图片      更新时间：2023-09-26

我目前有fancybox显示所有正确的图像/视频。然而，我似乎无法让它显示与每次调用fancybox相关联的标题。

我正在使用Fancybox V2.1.5

$(document).ready(function(){
$(".fancyYoutube").live('click',function(){
$.fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'titleShow' : 'true',
'speedIn' : '100',
'width' : 680,
'height' : 395,
'href' : this.href.replace(new RegExp("watch''?v=", "i"), 'v/'),
'type' : 'swf',
'swf' : {
'wmode' : 'transparent',
'allowfullscreen' : true,
},
beforeLoad: function() {
this.title = $(this.element).attr('caption');
}
});
return false;
});
});

我在需要的部分中使用caption=，但它仍然没有显示标题文本：（

我也在使用最新的JQuery插件。

任何帮助都将是伟大的，谢谢！

编辑：问题已解决：

$(document).ready(function(){
$(".fancyYoutube").live('click',function(){
$.fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'title' : this.title,
'speedIn' : '100',
'width' : 680,
'height' : 395,
'href' : this.href.replace(new RegExp("watch''?v=", "i"), 'v/'),
'type' : 'swf',
'swf' : {
'wmode' : 'transparent',
'allowfullscreen' : true
}
});
return false;
});
});

仅需要title : this.title,

如果我记得很清楚（我也在这里检查过：http://fancybox.net/blog）你需要这些参数

'titlePosition'         : 'inside',
'titleFormat'       : formatTitle

其中formatTitle是一个附加标题的函数

function formatTitle(title, currentArray, currentIndex, currentOpts) {
    return '<div id="tip7-title"><span><a href="javascript:;" onclick="$.fancybox.close();"><img src="/data/closelabel.gif" /></a></span>' + (title && title.length ? '<b>' + title + '</b>' : '' ) + 'Image ' + (currentIndex + 1) + ' of ' + currentArray.length + '</div>';
}

我认为这里有问题

this.title = $(this.element).attr('caption');

尝试使用类似的id（在不适合的地方使用适当的id）

$(this).html( $(this).attr('caption') );
相关文章：