Magnific-Popup Gallery在一个标签中包含两个图像标签

Question

I'm making a gallery with Magnific-Popup but for speed up my website i've inside the a tag two different image. One for big screen and another one for small screen. I'm hidding one or the other one image with bootstrap class (hidden-lg hidden-md & hidden-sm hidden-xs).

The problem is that when i click on the a tag to open the image gallery, Magnific-Popup try to open hidden image and return "the image could not be loaded".

 <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

It was my own error because i've two time the "gallery-item" class. One on the div tag and the other on the a tag.