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

My Featherlight gallery needs two clicks to be activated.
Would you happen to know why?
Here is my code…

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>

I can’t get rid of the container as they are part of Woocommerce plugin dynamics.

Here is the example: http://jadepalacecollective.com/product/shoes-4/
Click on the shoes once… and then twice. See?

Read more here: Why does my Featherlight gallery needs two clicks to be activated?

Leave a Reply

Your email address will not be published. Required fields are marked *