在旧版本的Fancybox中,我找到了一个允许我为各个图像自定义标题的代码。但升级到Fancybox v.2,我无法弄清楚如何更新功能,所以它仍然可以工作。是的,我是新手。帮助或链接将不胜感激。
旧代码......
<script type="text/javascript">
$(document).ready(function() {
$("a[rel=blanchard_group]").fancybox({
'transitionIn' : 'fade',
'transitionOut' : 'fade',
'titlePosition' : 'over',
'titleShow' : 'true',
'overlayShow' : 'true',
'overlayColor' : '#fff',
'overlayOpacity' : '0.9',
'showNavArrows' : 'true',
'enableEscapeButton' : 'true',
'scrolling' : 'no',
'onStart':function(currentArray,currentIndex,currentOpts){
var obj = currentArray[ currentIndex ];
if ($(obj).next().length)
this.title = $(obj).next().html();},
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">' + title + '</span>';
}
});
});
</script>
新代码......
<script type="text/javascript">
$(document).ready(function() {
$(".fancyproject").fancybox({
prevEffect : 'fade',
nextEffect : 'fade',
nextClick : true,
helpers : {
title : {
type : 'inside'
},
overlay : {
opacity : 0.9,
css : {
'background-color' : '#fff'
}
},
thumbs : {
width : 50,
height : 50
}
}
});
});
</script>
答案 0 :(得分:1)
谢谢你,JFK,你在另一篇文章中回答。这就是我在寻找的东西。非常感谢...
https://stackoverflow.com/a/8425900/1084188
我要做的是将标题设置为隐藏在Fancybox中 DIV所以我的工具提示会显示与标题不同的内容 的fancybox:
<a rel="group" class="fancylink" href="images/01.jpg" title="default title 1">image 1</a>
<a rel="group" class="fancylink" href="images/02.jpg" title="default title 2">image 2</a>
<a rel="group" class="fancylink" href="images/03.jpg" title="default title 3">image 3</a>
和Fancybox标题:
<div id="fancyboxTitles" style="display: none;">
<div>fancybox title one</div>
<div>fancybox title two</div>
<div>fancybox title three</div>
使用此脚本:
$(document).ready(function() {
$(".fancylink").fancybox({ afterLoad : function() {this.title = $("#fancyboxTitles div").eq(this.index).html();}}); //fancybox}); // ready