Shuffle.js plugin is being used in the project to filter the portfolio item in this template.
Follow the steps for customization
- Create all filter menu with
labelandinputtag. Setname="shuffle-filter"in all input tag and give them avalueand same namedid.
<div class="shuffle-btn-group">
<label class="active" for="all">
<input type="radio" name="shuffle-filter" id="all" value="all" checked="checked">Show All
</label>
<label for="commercial">
<input type="radio" name="shuffle-filter" id="commercial" value="commercial">Commercial
</label>
<label for="education">
<input type="radio" name="shuffle-filter" id="education" value="education">Education
</label>
<label for="government">
<input type="radio" name="shuffle-filter" id="government" value="government">Government
</label>
<label for="infrastructure">
<input type="radio" name="shuffle-filter" id="infrastructure" value="infrastructure">Infrastructure
</label>
<label for="residential">
<input type="radio" name="shuffle-filter" id="residential" value="residential">Residential
</label>
<label for="healthcare">
<input type="radio" name="shuffle-filter" id="healthcare" value="healthcare">Healthcare
</label>
</div><!-- project filter end -->
- Add shuffle-filter’s value as
data-groupsin your items.
<div class="row shuffle-wrapper">
<div class="col-1 shuffle-sizer"></div>
<div class="col-lg-4 col-md-6 shuffle-item" data-groups="["government","healthcare"]">
<div class="project-img-container">
</div>
</div><!-- shuffle item 1 end -->
<div class="col-lg-4 col-md-6 shuffle-item" data-groups="["healthcare"]">
<div class="project-img-container">
</div>
</div><!-- shuffle item 2 end -->
<div class="col-lg-4 col-md-6 shuffle-item" data-groups="["infrastructure","commercial"]">
<div class="project-img-container">
</div>
</div><!-- shuffle item 3 end -->
<div class="col-lg-4 col-md-6 shuffle-item" data-groups="["education","infrastructure"]">
<div class="project-img-container">
</div>
</div><!-- shuffle item 4 end -->
<div class="col-lg-4 col-md-6 shuffle-item" data-groups="["infrastructure","education"]">
<div class="project-img-container">
</div>
</div><!-- shuffle item 5 end -->
<div class="col-lg-4 col-md-6 shuffle-item" data-groups="["residential"]">
<div class="project-img-container">
</div>
</div><!-- shuffle item 6 end -->
</div><!-- shuffle end -->
- For gallery popup create an
anchor/atag and set classname asgallery-popup. set thehrefvalue of your popup image location.
<div class="project-img-container">
<a class="gallery-popup" href="images/projects/project1.jpg" aria-label="project-img">
<img class="img-fluid" src="images/projects/project1.jpg" alt="project-img">
<span class="gallery-icon"><i class="fa fa-plus"></i></span>
</a>
<div class="project-item-info">
****
</div>
</div>