{Theme} comes with Magnific popup gallery. To use ajax gallery with Magnific popup, please use the following HTML markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<div class="row ct-gallery"> <div class="col-sm-6 col-md-4 ct-u-paddingBottom50 ct-js-magnificPortfolioPopupGroup"> <a href="galleryajax.html" title="Tailoring a men's shirt"> <figure class="ct-hover ct-hover-type5"> <img src="../assets/images/tailor/demo-content/examples-1.jpg" alt=""> <figcaption> <h2>We make it with passion.</h2> </figcaption> </figure> </a> </div> <div class="col-sm-6 col-md-4 ct-u-paddingBottom50 ct-js-magnificPortfolioPopupGroup"> <a href="galleryajax2.html" title="Tailoring a men's shirt"> <figure class="ct-hover ct-hover-type5"> <img src="../assets/images/tailor/demo-content/examples-4.jpg" alt=""> <figcaption> <h2>We make it with passion.</h2> </figcaption> </figure> </a> </div> </div> |
You can use one 15 hover types: Check hovers demo here. You can change hover effects with the following CSS classes: .ct-hover-type1, .ct-hover-type2, .ct-hover-type3, .ct-hover-type4, .ct-hover-type5, .ct-hover-type6, .ct-hover-type7, .ct-hover-type8, .ct-hover-type9, .ct-hover-type10, .ct-hover-type11, .ct-hover-type12, .ct-hover-type13, .ct-hover-type14, […]