Magnific Popup - 不顯示圖庫圖像

Question

我想與elevateZoom合作使用Magnific Popup，我將它工作到了一個點，我已經將點擊處理程序綁定到縮放容器，在這種情況下，這是一個.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

我最終建立一個對象，然後傳遞，要莊重，彈出式窗口，我的解決方案：

$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 
      }, 
     }); 
});