产品上的 Woocommerce fancybox 画廊

Question

我正在使用 fancybox 插件作为 lightbox 插件。在我的 woocommerce 产品页面上，我创建了一个 link，它应该打开与每个产品相关联的图库（下面的代码位于循环内的 content-product.php 中，因此它可以正常工作）。

global $product;
$attachment_ids = $product->get_gallery_attachment_ids();

        <div class="product_quick_view">
            <?php $first_image = wp_get_attachment_image_src($attachment_ids[0], 'full'); ?>
            <a class="fancybox" rel="group<?php echo $product->id; ?>" href="<?php echo $first_image[0]; ?>"><?php echo esc_html('Quick view', 'theme'); ?></a>
            <div class="hidden_gallery">
            <?php foreach($attachment_ids as $image_id){
                $image_url = wp_get_attachment_image_src( $image_id, 'full' );
                echo '<a class="fancybox" rel="group'.$product->id.'" href="'.$image_url[0].'">'.wp_get_attachment_image( $image_id, 'full' ).'</a>';
            }; ?>
            </div>
        </div>

输出这个

<div class="product_quick_view">
    <a class="fancybox" rel="group3709" href="../uploads/2014/09/image1.jpg">Quick view</a>
    <div class="hidden_gallery">
        <a class="fancybox" rel="group3709" href="../uploads/2014/09/image1.jpg">
        <img width="552" height="820" src="../uploads/2014/09/image1.jpg" class="attachment-full" alt="image1">
        </a>
        <a class="fancybox" rel="group3709" href="../uploads/2014/09/image2.jpg">
        <img width="552" height="820" src="../uploads/2014/09/image2.jpg" class="attachment-full" alt="image2">
        </a>                
    </div>
</div>

.hidden_gallery class 将使 div 中的图像不可见。这应该使得 fancybox 将遍历同一 rel 属性中的所有图像。

但出于某种原因，它没有这样做。当我单击 'Quick view' link 时，我得到了附加到 link 的图像，但没有其他图像（它们在 DOM 中）。

这是因为 fancybox jQuery 在 woocommerce 加载图像之前触发了吗？我把它放在 $(document).ready() 环境中，我应该将它包装在 .load() 环境中还是使用 .imagesLoaded 插件？

Answer 1

好的，找到答案了。显然 fancybox 不工作，并且通常与 woocommerce 有问题，所以我使用了 woocommerce 附带的那个。

只需添加这个

<a itemprop="image" data-rel="prettyPhoto[product-gallery]<?php echo $product->id;?>" href="...

这会将它们分组，您将使用 woocommerce 自己的 fancybox。

产品上的 Woocommerce fancybox 画廊

Woocommerce fancybox gallery on products

html

php

wordpress

jquery

fancybox