使用Fancybox v2.x,您可以在触发 fancybox 的锚点之后将您title
的设置为单独(隐藏) ,例如:<div>
<a class="fancybox" href="images/01.jpg">open image</a>
<div style="display: none;"><!-- my title for fancybox above-->
<p>Line 1</p>
<p>line 2 with <a href="#nogo">link</a></p>
</div>
这样,您可以拥有更复杂title
的多行和 html 内容。然后你可以使用一个更简单的脚本:
$(document).ready(function() {
$(".fancybox").fancybox({
helpers : {
title : { type : 'inside' }
}, // helpers
/* the following option works fine until version v2.0.5 or below */
// afterLoad: function(){
// this.title = '<div class="myTitle">'+$(this.element).next('div').html()+'</div>';
// }
/* the following option should be set for version v2.0.6+ */
beforeShow: function(){
this.title = '<div class="myTitle">'+$(this.element).next('div').html()+'</div>';
}
}); // fancybox
}); // ready
您还可以为您设置单独的 css 声明title
:
.myTitle {background-color: #fff; padding: 5px;}
.myTitle p {line-height: 16px; font-size: 12px; padding: 0; margin: 0;}
/* if you want the title stick to the image in fancybox */
.fancybox-title-inside-wrap {margin-top: 0 !important;}
使用这种方法,您不必弄乱花哨的 js/css 文件。此外,更少的 javascript 意味着更少的 CPU 开销,包括不必要的拆分、大小计算、换行等。
问题:如果我有多个图像(画廊)怎么办?
答案:对 html 中的每个图像执行相同的操作,例如:
<a class="fancybox" rel="gallery" href="images/01.jpg">open image 1</a>
<div style="display: none;"><!-- my title for fancybox above-->
<p>Line 1</p>
<p>line 2 with <a href="#nogo">link</a></p>
</div>
<a class="fancybox" rel="gallery" href="images/02.jpg">open image 2</a>
<div style="display: none;"><!-- my second title -->
<p>Line 1 for second image title</p>
<p>line 2 with <a href="#nogo">link</a></p>
<p>a third line here, why not?</p>
</div>
等等......并使用相同的脚本。
注意:OP评论说:
如果我单击上一个或下一个按钮,标题就会消失。
对于 fancybox v2.0.6,我们需要title
使用 option来构建beforeShow
,而不是afterLoad
这样:
afterLoad: function(){
this.title = '<div class="myTitle">'+jQuery(this.element).next('div').html()+'</div>';
}
应该是(从 v2.0.6 开始):
beforeShow: function(){
this.title = '<div class="myTitle">'+jQuery(this.element).next('div').html()+'</div>';
}
使用 v2.0.6 的工作演示