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中）。

这是因为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画廊产品

1 个答案: