Question

在旧版本的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>

Answer 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

尝试在新版本的Fancybox中复制自定义标题

1 个答案: