Question

SETUP：

我们的布局包含：

由拇指触发的图库
由拇指触发的图库B
用作图库A的第二个触发器的标签

图库A（拇指）看起来像这样：

<a class="open-fancybox" href="<?= $image->url() ?>" rel="product-main-gallery">
  <img src="<?= thumb($image, array('width' => 355), false) ?>" alt="<?= $image->name() ?>">
</a>

辅助触发器的a标签如下所示：

<a class="open-fancybox" href="<?= $firstImage->url(); ?>" rel="product-main-gallery"</a>

的问题：

在辅助触发器上，正在使用图库A中第一个图像的URL - 但单击时，第一个图像将显示两次。

如果我们改为使用href="#"，则图库A会打开，但第一张图片为空白。

问题：

我们如何使用a标签作为图库A的辅助触发器？

我们的javascript有点绿，所以任何指针都会非常感激 - 作为参考，画廊正在初始化如下：

<script>
  // Initialise fancy-box: http://fancyapps.com/fancybox/
  $(function() {
    $(".open-fancybox").fancybox({
      openEffect  : 'fade',
      closeEffect : 'elastic',
      nextEffect  : 'fade',
      prevEffect  : 'fade',
      nextSpeed   : 'slow',
      prevSpeed   : 'slow',
      arrows      : 'true',

      // configure overlay style (for full screen image as per below)
      padding     : 0,
      margin      : 0,
      autoCenter   : false,

      helpers : {
        // configure overlay colour
        overlay : {
          css : {
            'background' : 'rgba(255, 255, 255, 1)'
          }
        }
      },

      // force overlay image to full screen: http://jsfiddle.net/2XhjG/
      afterLoad  : function () {
        $.extend(this, {
          aspectRatio : false,
          type    : 'html',
          width   : '100%',
          height  : '100%',
          content : '<div class="fancybox-image" style="background-image:url(' + this.href + '); background-size: cover; background-position:50% 50%;background-repeat:no-repeat;height:100%;width:100%;" /></div>'
        });
      }
    });
  });
</script>

Answer 1

您始终可以使用另一个<a>链接（或其他元素）来触发fancybox图库，该链接不需要属于图库本身（可以是缩略图或简单文本）< / p>

你有（至少）两个选择：

1）。使用属性onclick（来自您的触发器）触发图库，如：

<a href="image.jpg" onclick="$('a.fancybox').eq(0).trigger('click'); return false;">trigger fancybox gallery</a>

注意我们通过.eq()方法定位图库的第一个元素。当然，我们应该将选择器.fancybox（在您的情况下为.open-fancybox）绑定到fancybox。

2）。将click事件绑定到触发器，如

<a class="trigger" href="image.jpg">I am another trigger</a>

注意我们将类.trigger添加到元素，然后

$(".trigger").click(function () {
    $(".fancybox").eq(0).trigger("click");
    return false;
});

只要您不在触发器中使用绑定到fancybox图库的相同选择器，上述选项都不会复制第一个图像。

参见 JSFIDDLE

当一个触发器不是图像时，如何在fancybox图库上使用两个触发器？

1 个答案: