portfolio
HTML markup:
|
1 2 3 4 5 |
<div class="container-fluid"> <div id="ct-gallery" class="ct-gallery ct-gallery--col4 ct-js-magnificPortfolioPopupGroup"> ... </div> </div> |
HTML markup for Single Item:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div class="ct-gallery-item ct-gallery-item--masonry ct-gallery-item--default hidden ct-gallery-item--normal webdesign"> <div class="ct-gallery-itemInner"> <a class="ct-js-magnificPopupImage" href="../assets/images/demo-content/portfolio-03.jpg" title="Berlin Songs Festival"> <figure class="ct-hover ct-js-hover ct-hover--type10"> <img src="../assets/images/demo-content/portfolio-03.jpg" alt=""> <figcaption> <div class="ct-hover-inner"> <div class="ct-hover-text"> <h4 class="ct-hover-header">Berlin Songs Festival</h4> <div class="ct-u-hr ct-u-hr--mid"></div> <p>Design / Photography</p> </div> </div> </figcaption> </figure> </a> </div> </div> |
Required scripts:
|
1 2 3 4 5 6 7 |
<script src="../assets/js/magnific-popup/jquery.magnific-popup.min.js"></script> <script src="../assets/js/magnific-popup/init.js"></script> <script src="../assets/js/portfolio/jquery.isotope.min.js"></script> <script src="../assets/js/portfolio/imagesloaded.js"></script> <script src="../assets/js/portfolio/infinitescroll.min.js"></script> <script src="../assets/js/portfolio/init.js"></script> |