Use gallery with Magnific Popup Images with simple HTML markup:
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="ct-galleryContainer ct-js-popupGallery ct-u-paddingBoth50"> <div class="ct-galleryContainer-image"> <a href="../assets/images/demo-content/country-gallery-backyard.jpg" class="ct-js-magnificPopupImage" title="Backyard"><img src="../assets/images/demo-content/country-gallery-category1.jpg" alt="Category"></a> <a href="../assets/images/demo-content/country-gallery-backyard2.jpg" class="ct-js-magnificPopupImage" title="Backyard"></a> <a href="../assets/images/demo-content/country-gallery-backyard3.jpg" class="ct-js-magnificPopupImage" title="Backyard"></a> <a href="../assets/images/demo-content/country-gallery-backyard4.jpg" class="ct-js-magnificPopupImage" title="Backyard"></a> <a href="../assets/images/demo-content/country-gallery-backyard5.jpg" class="ct-js-magnificPopupImage" title="Backyard"></a> <a href="../assets/images/demo-content/country-gallery-backyard6.jpg" class="ct-js-magnificPopupImage" title="Backyard"></a> </div> <h4>Backyard</h4> </div> |
Inside the gallery:
We put ct-js-popupGallery to the container which is going to be parent of certain gallery. And then we add one image and other images with empty links so that is why we can achieve effect of many galliers in one pages after one click.
Javascript
|
1 |
<script src="../assets/js/magnific-popup/jquery.magnific-popup.min.js"></script> |