Magnific-Popup Gallery在一個標簽中包含兩個圖像標簽

Question

我正在使用Magnific-Popup創建一個畫廊，但是為了加快我的網站的速度，我在一個標簽中放置了兩個不同的圖像。 一個用於大屏幕，另一個用於小屏幕。 我用bootstrap類（hidden-lg hidden-md和hidden-sm hidden-xs）隱藏一個或另一個圖像。

問題是，當我單擊一個標簽以打開圖像庫時，Magnific-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

這是我自己的錯誤，因為我有兩次參加“畫廊項目”課程。 一個在div標簽上，另一個在a標簽上。