javascript - 花式盒子2 : styling direct link

Question

我在弄清楚如何设计 fancybox 样式时遇到了一些问题。目前，我设置的选项是从其他位置零碎获得的。

我发现了一些关于创建指向 fancybox 图像的直接链接并触发灯箱功能的内容:

<!-- Fancybox remote link trigger -->
<script type="text/javascript">
    var thisHash = window.location.hash;
        $(document).ready(function() {
            if(window.location.hash) {
                $(thisHash).fancybox().trigger('click');
            }
            $('.fancylink').fancybox();

        }); // ready
</script>

这很好用。我在每个链接中设置了一个 id，当您访问它时，我可以获得一个触发 fancybox 的直接 url。但问题是我不明白如何正确设置 fancybox 的样式，而且老实说文档非常薄弱。我在这里通过更零碎的方式设法设计了我的主要 fancybox 实现:

<script type="text/javascript">
    var thisHash = window.location.hash;
    $(document).ready(function() {
        if(window.location.hash) {
            $(thisHash).fancybox().trigger('click');
        }
            $('.fancylink').fancybox();
        $(".fancybox").fancybox({
            helpers : { 
                title : { type : 'inside' }
            }, // helpers
            beforeShow : function() {
                this.title = (this.title ? '' + this.title + '' : '') + '<br>' + '<span style="font-family:Open Sans, sans-serif; color:#bfbfbf; font-size: 12px;">' + 'Image ' + (this.index + 1) + ' of ' + this.group.length;  
            } // beforeShow
        }); // fancybox
    }); // ready
</script>

这具有我想要的所有正确选项和样式，以及显示照片计数的辅助行，但我在上面的直接链接代码中没有得到它。我尝试将两者结合起来，但没有运气，我要么放弃它，要么没有得到结果。我假设我可以将这两个 block 组合在一起，但我只是不确定如何组合。

Answer 1

您只需为您的工作代码提供 fancybox 选项，如下所示:

编辑。修复了之前的代码

<!-- Fancybox remote link trigger -->
<script type="text/javascript">
   var thisHash = window.location.hash;
    $(document).ready(function() {

        $(thisHash).fancybox({
            helpers : { 
               title : { type : 'inside' }
            }, // helpers
            beforeShow : function() {
               this.title = (this.title ? '' + this.title + '' : '') + '<br>' + '<span style="font-family:Open Sans, sans-serif; color:#bfbfbf; font-size: 12px;">' + 'Image ' + (this.index + 1) + ' of ' + this.group.length;  
            } // beforeShow
        });
        if(window.location.hash) {
            $(thisHash).trigger('click');
        }
    }); // ready
</script>