In {Theme} theme to create a gallery we used masonry Magnific Pop-up Plugin to show the big images
Gallery
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<div class="ct-photoGallery ct-js-popupGallery"> <div class="ct-photoGallery-item ct-item--small"><a href="../assets/images/demo-content/delimondo/big-image6.jpg" title="Neque porro quisquam est" class="ct-js-magnificPopupImage"> <div class="ct-galleryTitle ct-u-fontSize24 ct-u-fontTypeBold text-uppercase">a romantic dinner<br> for two</div> <div class="ct-galleryDescription ct-u-fontSize16 ct-u-fontTypeRegularPellentesque">habitant morbi tristique senectus et netus et <br>malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat<br> vitae, ultricies eget, tempor sit amet, ante.</div><img src="../assets/images/demo-content/delimondo/image1.jpg" alt="Image"></a></div> <div class="ct-photoGallery-item ct-item--big"><a href="../assets/images/demo-content/delimondo/big-image7.jpg" title="Sed ut perspiciatis unde omnis" class="ct-js-magnificPopupImage"> <div class="ct-galleryTitle ct-u-fontSize24 ct-u-fontTypeBold text-uppercase">a romantic dinner<br> for two</div> <div class="ct-galleryDescription ct-u-fontSize16 ct-u-fontTypeRegularPellentesque">habitant morbi tristique senectus et netus et malesuada <br>fames ac turpis egestas. Vestibulum tortor quam, feugiat<br> vitae, ultricies eget, tempor sit amet, ante.</div><img src="../assets/images/demo-content/delimondo/image2.jpg" alt="Image"></a></div> <div class="clearfix"></div> <div class="ct-photoGallery-item ct-item--big"><a href="../assets/images/demo-content/delimondo/big-image5.jpg" title="Ut enim ad" class="ct-js-magnificPopupImage"> <div class="ct-galleryTitle ct-u-fontSize24 ct-u-fontTypeBold text-uppercase">a romantic dinner<br> for two</div> <div class="ct-galleryDescription ct-u-fontSize16 ct-u-fontTypeRegularPellentesque">habitant morbi tristique senectus et netus et malesuada <br>fames ac turpis egestas. Vestibulum tortor quam, feugiat<br> vitae, ultricies eget, tempor sit amet, ante.</div><img src="../assets/images/demo-content/delimondo/image3.jpg" alt="Image"></a></div> <div class="ct-photoGallery-item ct-item--small"><a href="../assets/images/demo-content/delimondo/big-image4.jpg" title="Neque porro quisquam est" class="ct-js-magnificPopupImage"> <div class="ct-galleryTitle ct-u-fontSize24 ct-u-fontTypeBold text-uppercase">a romantic dinner<br> for two</div> <div class="ct-galleryDescription ct-u-fontSize16 ct-u-fontTypeRegularPellentesque">habitant morbi tristique senectus et netus et <br>malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat<br> vitae, ultricies eget, tempor sit amet, ante.</div><img src="../assets/images/demo-content/delimondo/image4.jpg" alt="Image"></a></div> <div class="clearfix"></div> <div class="ct-photoGallery-item ct-item--small"><a href="../assets/images/demo-content/delimondo/big-image3.jpg" title="Quis autem vel eum" class="ct-js-magnificPopupImage"> <div class="ct-galleryTitle ct-u-fontSize24 ct-u-fontTypeBold text-uppercase">a romantic dinner<br> for two</div> <div class="ct-galleryDescription ct-u-fontSize16 ct-u-fontTypeRegularPellentesque">habitant morbi tristique senectus et netus et <br>malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat<br> vitae, ultricies eget, tempor sit amet, ante.</div><img src="../assets/images/demo-content/delimondo/image5.jpg" alt="Image"></a></div> <div class="ct-photoGallery-item ct-item--small"><a href="../assets/images/demo-content/delimondo/big-image2.jpg" title="Nemo enim ipsam voluptatem quia" class="ct-js-magnificPopupImage"> <div class="ct-galleryTitle ct-u-fontSize24 ct-u-fontTypeBold text-uppercase">a romantic dinner<br> for two</div> <div class="ct-galleryDescription ct-u-fontSize16 ct-u-fontTypeRegularPellentesque">habitant morbi tristique senectus et netus et <br>malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat<br> vitae, ultricies eget, tempor sit amet, ante.</div><img src="../assets/images/demo-content/delimondo/image6.jpg" alt="Image"></a></div> <div class="ct-photoGallery-item ct-item--small"><a href="../assets/images/demo-content/delimondo/big-image1.jpg" title="Quis autem vel eum" class="ct-js-magnificPopupImage"> <div class="ct-galleryTitle ct-u-fontSize24 ct-u-fontTypeBold text-uppercase">a romantic dinner<br> for two</div> <div class="ct-galleryDescription ct-u-fontSize16 ct-u-fontTypeRegularPellentesque">habitant morbi tristique senectus et netus et <br>malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat<br> vitae, ultricies eget, tempor sit amet, ante.</div><img src="../assets/images/demo-content/delimondo/image7.jpg" alt="Image"></a></div> </div> |
JavaScript
<script src=”../assets/plugins/magnific-popup/magnificpopup.min.js”></script>
<script src=”../assets/plugins/magnific-popup/init.js”></script>