We are using Isotope and Magnific Popup for portfolio. You can change number of portfolio columns and/or add portfolio filters with following classes:
- .ct-gallery-filters (isotope navigation)
- .ct-gallery
- .ct-gallery–col1
- .ct-gallery–col2
- .ct-gallery–col3
- .ct-gallery–col4
- .ct-gallery–col5
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 |
<section id="portfolio" class="section"> <div class="ct-mediaSection ct-u-paddingBoth100 ct-u-text--white text-center" data-stellar-background-ratio="0.3" data-height="295" data-type="parallax" data-bg-image="assets/images/demo-content/portfolio-parallax.jpg" data-bg-image-mobile="assets/images/demo-content/portfolio-parallax.jpg"> <div class="container"> <div class="ct-heading text-uppercase ct-u-marginBottom30"> <h2>Our work</h2> </div> <ul class="ct-gallery-filters list-unstyled list-inline"> <li><a data-filter="*" class="btn btn-default btn-transparent--border ct-u-text--white active">All</a></li> <li><a data-filter=".creative" class="btn btn-default btn-transparent--border ct-u-text--white">Creative</a></li> <li><a data-filter=".development" class="btn btn-default btn-transparent--border ct-u-text--white">Development</a></li> <li><a data-filter=".print" class="btn btn-default btn-transparent--border ct-u-text--white">Print</a></li> </ul> </div> </div> <div id="ct-gallery" class="ct-gallery ct-gallery--col4"> <div class="ct-gallery-item ct-gallery-item--masonry hidden development"> <div class="ct-gallery-itemInner"> <a href="assets/images/demo-content/portfolio-image-1.jpg" class="ct-js-magnificPopupImage"> <img src="assets/images/demo-content/portfolio-thumbnail-1.jpg" alt="Portfolio"> <div class="ct-galleryBox-overlay"></div> <div class="ct-hover--text text-uppercase"> <h4 class="ct-fw-600">Project name goes here</h4> <span class="ct-fw-600">Creative</span> </div> </a> </div> </div> |
Javascript:
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 |
jQuery(window).load(function () { if ($().isotope && ($('.ct-gallery').length > 0)) { var $container = $('.ct-gallery'), // object that will keep track of options isotopeOptions = {}, // defaults, used if not explicitly set in hash defaultOptions = { filter: '*', itemSelector: '.ct-gallery-item', // set columnWidth to a percentage of container width masonry: { } }; // set up Isotope $container.isotope(defaultOptions); $container.imagesLoaded().progress(function (instance, image) { if (!image.isLoaded) { return; } var p = $(image.img).closest('.hidden'); p.removeClass('hidden'); $container.addClass('is-loaded') $container.isotope('layout'); }) $('.ct-gallery-filters a').click(function () { $('.ct-gallery-filters .active').removeClass('active'); $(this).addClass('active'); var selector = $(this).attr('data-filter'); $container.isotope({ filter: selector, animationOptions: { duration: 750, easing: 'linear', queue: false } }); return false; }); } }); |