Массивное всплывающее окно не работает должным образом

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

Якорь тег должен иметь изображения всплывающих окон подходят ширины класса, а образ-всплывающего окна.

<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>