Question

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

<?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>

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

对不起我的英语。

Answer 1

假设您使用不同的rel属性设置了不同的图库...

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

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

......等等。

您可以使用相同的类为每个图库设置不同的启动器：

<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

Fancybox画廊冷杉图像发射器

1 个答案: