Fancybox 画廊第一个图像启动器答案

【问题标题】：Fancybox galleries firs image launcherFancybox 画廊第一个图像启动器
【发布时间】：2014-03-19 04:16:41
【问题描述】：

我在页面上有一些画廊。第一个图像是启动器，其他图像显示：无。

<?php if ($i == 1): ?>
   <a class="fancyboxLauncher" rel="group1" href="URL"><img src="URL"></a>
<?php else: ?>
   <div class="display_none">
      <a class="fancybox" rel="group1" href="URL"><img src="URL"></a>
      <a class="fancybox" rel="group1" href="URL"><img src="URL"></a>   
   </div>                   
<?php endif; ?>

// 我有一些画廊（group1、group2、group3 ...等）

<script type="text/javascript">
$(".fancyboxLauncher").on("click", function(){
    $(".fancybox").eq(0).trigger("click");
    return false;
});
</script>

<script type="text/javascript">
$(".fancybox")
    .fancybox({
        beforeLoad: function() {
            this.title = $(this.element).attr('caption');
        }
    });             
</script>

此代码仅启动页面上的第一个画廊。如何启动任何画廊？

对不起我的英语。

【问题讨论】：

标签： jquery fancybox gallery fancybox-2

【解决方案1】：

假设您使用不同的rel 属性设置了不同的画廊...

<a class="fancybox" rel="gallery1" ...
<a class="fancybox" rel="gallery1" ...

<a class="fancybox" rel="gallery2" ...
<a class="fancybox" rel="gallery2" ...

...等等

您可以使用相同的 class 为每个画廊设置不同的启动器，例如：

<a class="fancyboxLauncher" data-group="gallery1" href="URL">Gallery 1 launcher</a>
<a class="fancyboxLauncher" data-group="gallery2" href="URL">Gallery 2 launcher</a>

注意，启动器不需要与每个图库中的图像具有相同的 rel 属性，因为它们只是启动器（它们可能具有与第一个相同的缩略图画廊的图片。）另外注意我们已经设置了一个data-group属性，它指示每个启动器的目标画廊。

然后您可以将此代码用于启动器和fancybox：

<script type="text/javascript">
jQuery(document).ready(function ($) {
    $(".fancyboxLauncher").on("click", function () {
        var thisGroup = $(this).data("group");
        $(".fancybox[rel=" + thisGroup + "]").eq(0).trigger("click");
        return false;
    });
    $(".fancybox").fancybox({
        beforeLoad: function () {
            this.title = $(this.element).attr('caption');
        }
    });
}); // ready
</script>

注意这两个脚本都封装在同一个 .ready() 方法中。

见JSFIDDLE

【讨论】：

太棒了！感谢您描述解决方案。