1つのタグに2つのイメージタグを持つMagnific-Popup Gallery

Question

Magnific-Popupでギャラリーを作っていますが、私のウェブサイトを高速化するために、タグ内に2つの異なるイメージがあります。 1つは大画面用、もう1つは小画面用です。ブートストラップクラス（hidden-lg hidden-md & hidden-sm hidden-xs）を使って、どちらか一方のイメージを隠しています。

画像ギャラリーを開くためにタグをクリックすると、Magnifico-Popupが隠し画像を開いて「画像を読み込めませんでした。

<li> 
 
    <figure> 
 
    <div class="gallery-item"> 
 
     <a href="assets/upload/images/romantic/clem-onojeghuo-193397.jpg" title="" class="gallery-item"> 
 
     <img src="/assets/image-cache/romantic/clem-onojeghuo-193397.5ddf5942.jpg" alt="" class="hidden-lg hidden-md"> 
 
     <img src="/assets/image-cache/romantic/clem-onojeghuo-193397.36620614.jpg" alt="" class="hidden-sm hidden-xs"> 
 
     <div class="gallery-caption"> 
 
      <div class="centrize"> 
 
      <div class="v-center"><i class="hc-search"></i></div> 
 
      </div> 
 
     </div> 
 
     </a> 
 
    </div> 
 
    </figure> 
 
</li>

$('.gallery-item').magnificPopup({ 
 
    type: 'image', 
 
    gallery:{ 
 
    enabled:true 
 
    } 
 
});

Answer 1

私は2つの時間 "のギャラリーアイテム" クラスをしましたので、それは私自身のエラーでした。 1つはdivタグ、もう1つはタグです。