Fancybox 2：直接造型 link

Question

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

我发现了一些关于创建直接 link 到 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>

效果很好。我在每个 link 中设置了一个 id，我可以得到一个直接的 url，当你去它的时候会触发 fancybox。但问题是我不明白如何正确设置 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>

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

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>

Fancybox 2：直接造型 link

Fancybox 2: styling direct link

javascript

jquery

fancybox-2