宏彈出窗口無法正常工作

Question

華麗的彈出窗口正在工作，但不是我想要的方式。

這是Plnkr 。

為什么不起作用？ 這是jQuery代碼：

$('.view').click(function() {
    $('.image-popup').magnificPopup({
        type: 'image',
        closeOnContentClick: true,
        mainClass: 'mfp-img-mobile',
        image: {
            verticalFit: true
        }
    });
});

Answer 1

為什么不將html更改為：

<div class="pic">
    <a  class="image-popup-fit-width" href="http://farm4.staticflickr.cm/3721/9207329484_ba28755ec4_o.jpg" title="This image fits only horizontally.">
    <img src="pictureLink" width="75" height="75">
  </a>
  <p><a href="http://farm4.staticflickr.com/3721/9207329484_ba28755ec4_o.jpg" class="image-popup-fit-width">Click to view</a></p>
  </div>

Answer 2

定位標記需要具有image-popup-fit-width類，而不是image-popup。

<a  class="image-popup-fit-width" href="http://farm4.staticflickr.com/3721/9207329484_ba28755ec4_o.jpg" title="This image fits only horizontally.">
        <img src="http://farm4.staticflickr.com/3721/9207329484_ba28755ec4_o.jpg" width="75" height="75">
</a>