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，我可以获得一个直接的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>

这有我想要的所有正确的选项和样式，显示照片计数的辅助线，但我不能通过上面的直接链接代码得到它。我尝试将两者合并但没有运气，我要么把它弄糊涂，要么没有得到结果。我假设我可以将这两个块组合在一起，但我不确定如何。

Answer 1

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

EDIT。固定的流行代码

<!-- 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：造型直接链接

1 个答案: