Magnific PopUp demo

by Vladimir

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css">
<div id="question">
<a href="https://via.placeholder.com/300/09f/fff.png">
  <img src="https://placekitten.com/360/240" alt="">
</a>
<a href="https://via.placeholder.com/400/09f/fff.jpg">
  <img src="https://placekitten.com/361/240" alt="">
</a>
</div>
<a href="https://via.placeholder.com/300/09f/fff.png">
  <img src="https://placekitten.com/360/200" alt="">
</a>
<a href="https://via.placeholder.com/400/09f/fff.jpg">
  <img src="https://placekitten.com/361/219" alt="">
</a>

JavaScript

$('#question a[href$="png"],#question  a[href$="jpg"]').magnificPopup({
	type: 'image'
});