为什么我的 Featherlight 画廊需要点击两次才能激活？

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

第一次点击失败，因为这个错误：

Featherlight: no content filter found (no target specified)

第 227 行 featherlight.js

您可以在第一次点击图库后检查您的浏览器控制台，您应该会看到同样的错误

Answer 2

Javascript 控制台显示此错误：

"Featherlight: no content filter found (no target specified)"

该错误通常发生在您将图像绑定后添加到Featherlight 时。为防止此错误，您可以在动态添加图像后手动绑定 Featherlight：

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

为什么我的 Featherlight 画廊需要点击两次才能激活？

Why does my Featherlight gallery needs two clicks to be activated?

javascript

jquery

woocommerce

featherlight.js