Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device. Demo page.
Usage
To use the plugin, you need to add the following files.
<!-- CSS -->
<link rel="stylesheet" href="libs/lightbox/magnific-popup.css" type="text/css">
<!-- Javascript -->
<script src="libs/lightbox/jquery.magnific-popup.min.js"></script>Basic example
<a class="image-popup" href="big-image.jpg">
<img src="small-image.jpg" alt="image">
</a>$('.image-popup').magnificPopup({
type: 'image',
zoom: {
enabled: true,
duration: 300,
easing: 'ease-in-out',
opener: function(openerElement) {
return openerElement.is('img') ? openerElement : openerElement.find('img');
}
}
});Gallery
<div class="row">
<div class="col-md-2 m-b-15">
<a class="image-popup-gallery-item" href="big-image.jpg">
<img src="small-image.jpg" class="img-fluid" alt="image">
</a>
</div>
<div class="col-md-2 m-b-15">
<a class="image-popup-gallery-item" href="big-image.jpg">
<img src="small-image.jpg" class="img-fluid" alt="image">
</a>
</div>
<div class="col-md-2 m-b-15">
<a class="image-popup-gallery-item" href="big-image.jpg">
<img src="small-image.jpg" class="img-fluid" alt="image">
</a>
</div>
<div class="col-md-2 m-b-15">
<a class="image-popup-gallery-item" href="big-image.jpg">
<img src="small-image.jpg" class="img-fluid" alt="image">
</a>
</div>
<div class="col-md-2 m-b-15">
<a class="image-popup-gallery-item" href="big-image.jpg">
<img src="small-image.jpg" class="img-fluid" alt="image">
</a>
</div>
<div class="col-md-2 m-b-15">
<a class="image-popup-gallery-item" href="big-image.jpg">
<img src="small-image.jpg" class="img-fluid" alt="image">
</a>
</div>
</div>let magnificPopupGalleryConfig = {
type: 'image',
gallery: {
enabled: true
},
zoom: {
enabled: true,
duration: 300,
easing: 'ease-in-out',
opener: function(openerElement) {
return openerElement.is('img') ? openerElement : openerElement.find('img');
}
}
};
$('.image-popup-gallery-item').magnificPopup(magnificPopupGalleryConfig);
On this page