How to setup the isotope masonry gallery
The 3 column masonry gallery is found on work.html page
<ul class="grid" data-isotope='{ "itemSelector": ".ptf-item", "layoutMode": "fitRows"}'> <li class="ptf-item branding" data-category="branding"> <div class="grid-item-wrapper"> <a class="portfolio-link" href="portfolio-item.html"></a> <div class="ag-gridGallery__img-container"> <img src="images/portf_07.jpg" alt title="portfolio1"> </div> <div class="portfolio-overlay"> <div class="portfolio-inner"> <i class="ag-icon glyphicon glyphicon-link ag-icon__circled-icon"></i> </div> </div> </div> </li>
The class that triggers the js file is .ptf-item
To change the filter names, the data-filter
has to be changed in the navigation and in each li
of the portfolio item, the class
and data category
<li class="ptf-item branding" data-category="branding">
On the news.html page, the class that triggers the isotope is “.grid”, and each isotope item class is “.ptf-item”
<ul class="grid" data-isotope='{ "itemSelector": ".grid-item", "layoutMode": "masonry" }'> <li class="grid-item grid-item--width3">
On the index page, the code looks in the following way:
<div class="grid ag-gridGallery-jstrigger " data-isotope='{ "itemSelector": ".grid-item", "layoutMode": "fitRows" }'> <div class="grid-item grid-item--width2 gallery-item">
The class that triggers the masonry is "grid"
and the masonry items are defined by "grid-item grid-item--width2"
The styles of the grid elements are found in app/css/scss/elements/_portfolio.scss