Question

我的Featherlight图库需要激活两次点击。你会碰巧知道为什么吗？这是我的代码......

的Javascript / jQuery的：

    $(".woocommerce-product-gallery").attr({
    "data-featherlight-gallery" : "",
    "data-featherlight-filter" : "a"
});

HTML：

<div class="woocommerce-product-gallery">
    <figure class="product_gallery">
        <div data-thumb="THUMBNAIL_image.jpg" class="woocommerce-product-gallery__image"><a href="BIG_image.jpg"><img width="593" height="800" src="MEDIUM_image.jpg" data-src="BIG_image.jpg"></a></div>
        <div data-thumb="THUMBNAIL_image2.jpg" class="woocommerce-product-gallery__image"><a href="BIG_image2.jpg"><img width="593" height="800" src="MEDIUM_image2.jpg"></a></div>
        <div data-thumb="THUMBNAIL_image3.jpg" class="woocommerce-product-gallery__image"><a href="BIG_image3.jpg"><img width="593" height="800" src="MEDIUM_image3.jpg"></a></div>
</figure>

我无法摆脱容器，因为它们是Woocommerce插件动态的一部分。

以下是示例：http://jadepalacecollective.com/product/shoes-4/ 点击鞋子一次......然后两次。见

Answer 1

Javascript控制台显示此错误：

＆＃34; Featherlight：未找到内容过滤器（未指定目标）＆＃34;

将图像绑定到Featherlight后，通常会发生此错误。要防止出现此错误，您可以在动态添加图片后手动绑定Featherlight：

$('woocommerce-product-gallery__wrapper').featherlight();

Answer 2

由于此错误，第一次点击无效：

Featherlight：找不到内容过滤器（未指定目标）

featherlight.js第227行

首次点击图库后，您可以检查浏览器控制台，您应该看到相同的错误

为什么我的Featherlight图库需要激活两次点击？

2 个答案: