产品上的 Woocommerce fancybox 画廊

Question

我使用fancybox 插件作为lightbox 插件。在我的woocommerce 产品页面上，我创建了一个链接，该链接应该打开与每个产品关联的图库（下面的代码在循环内的 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 类将使该 div 中的图像不可见。这应该使fancybox 将遍历同一rel 属性中的所有图像。

但由于某种原因，它没有这样做。当我单击“快速查看”链接时，我得到了附加到该链接的图像，但没有其他图像（它们位于 DOM 中）。

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

Answer 1

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

添加这个

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

这将对它们进行分组，您将使用 woocommerce 自己的可运行的幻想框。