In {Theme} theme we use Magnific Popup – v0.9.9
Magnific Pop Up Box
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
This code can be find in the {Theme} main.js file
|
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 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
(function ($) { "use strict"; $(document).on('ready', function () { if(!device.mobile()) { if (jQuery().magnificPopup) { jQuery('.ct-js-popupGallery').each(function () { // the containers for all your galleries jQuery(this).magnificPopup({ type: 'image', mainClass: 'ct-magnificPopup--image', removalDelay: 160, preloader: true, delegate: '.ct-js-magnificPopupImage', closeBtnInside: true, closeOnContentClick: false, closeOnBgClick: true, midClick: true, gallery: { enabled: true }, callbacks: { buildControls: function () { // re-appends controls inside the main container this.contentContainer.append(this.arrowLeft.add(this.arrowRight)); }, beforeOpen: function () { // just a hack that adds mfp-anim class to markup this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure mfp-with-anim'); this.st.mainClass = this.st.el.attr('data-effect'); } } }); }); jQuery('.ct-js-videoPlay').each(function () { jQuery(this).magnificPopup({ type: 'iframe', iframe: { markup: '<div class="iframe-popup">' + '<iframe class="mfp-iframe" frameborder="0" scrolling="no" allowtransparency="true" allowfullscreen></iframe>' + '<div class="mfp-close"></div>' + '</div>' } }); }); jQuery('.ct-js-popupImage').each(function () { jQuery(this).magnificPopup({ type: 'image', callbacks: { beforeOpen: function () { // just a hack that adds mfp-anim class to markup this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure mfp-with-anim'); this.st.mainClass = this.st.el.attr('data-effect'); } } }); }); } } }); })(jQuery); |
JavaScript
<script src=”./assets/plugins/magnific-popup/magnificpopup.min.js”></script>
<script src=”./assets/plugins/magnific-popup/init.js”></script>