HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div class="ct-galleryContainer ct-js-popupGallery"> <a href="../assets/images/demo-content/gallery-1-sm.jpg" class="ct-js-magnificPopupImage" data-effect="mfp-zoom-in"> <figure> <img src="../assets/images/demo-content/gallery-1-sm.jpg" alt="Image"/> <figcaption> <span class="ct-galleryContainer-inStock">(14 pictures)</span> <h4 class="text-capitalize ct-galleryContainer-title">Grand New Opening Of Our Hostel</h4> <span class="btn btn-link ct-u-marginTop20"><strong>See</strong> gallery<span><i class="icon-right-small"></i></span></span> </figcaption> </figure> </a> <a href="../assets/images/demo-content/gallery-1-sm.jpg" class="ct-js-magnificPopupImage"></a> <a href="../assets/images/demo-content/gallery-2-sm.jpg" class="ct-js-magnificPopupImage"></a> <a href="../assets/images/demo-content/gallery-3-sm.jpg" class="ct-js-magnificPopupImage"></a> <a href="../assets/images/demo-content/gallery-4-sm.jpg" class="ct-js-magnificPopupImage"></a> <a href="../assets/images/demo-content/gallery-5-sm.jpg" class="ct-js-magnificPopupImage"></a> </div> |
JavaScript
<script src=”../assets/js/magnificpopup/magnificpopup.min.js”></script>
<script src=”../assets/js/magnificpopup/init.js”></script>
Screenshot
Gallery