Question

我正在尝试使用Magnific Popup与elevateZoom合作，我让它工作到我将点击处理程序绑定到缩放容器的位置，在这种情况下是.product-image-gallery div。

如果我传递单个图像src，例如$j('.product-image-gallery .gallery-image').attr('src');作为src:参数然后我得到一个带有图像的弹出窗口，但是当我自己传递一个更通用的选择器（例如.gallery-image）时，我得到一个'图像无法加载'消息。

目的是让弹出窗口让我循环浏览所有可用的产品图像。

HTML：

<div class="product-image-gallery">
    <img id="image-main" class="gallery-image visible" src="example1.jpg" alt="Title" title="Title" />
    <img id="image-0" class="gallery-image" src="example1.jpg" data-zoom-image="example1.jpg" />
    <img id="image-1" class="gallery-image" src="example2.jpg" data-zoom-image="example2.jpg" />
    <img id="image-2" class="gallery-image" src="example3.jpg" data-zoom-image="example3.jpg" />
</div>

JS（$j，因为jQuery处于noConflict模式）：

    $j.magnificPopup.open({
  items: {
    src: '.gallery-image', 
    type: 'image',
    gallery: {
      enabled: true
    }
  }
});

Answer 1

我最终构建了一个对象，然后将其传递给了magnific-popup，我的解决方案：

$j('.product-image-gallery').bind('click', function(){

        galleryObj = [];
        $j('.product-image-gallery .gallery-image').not('#image-main').each(function() {

            var src = $j(this).data('zoom-image'),
                type = 'image'; // it's always an image :)

            image = {};
            image ["src"] = src;
            image ["type"] = type;

            galleryObj.push(image);
        });

        // open the popup
       $j.magnificPopup.open({
            items: galleryObj,
            gallery: {
                enabled: true
            },
       });
});

Magnific Popup - 画廊图像不显示

1 个答案: