What is a Image Gallery Filter:
Image gallery filter is a way of presenting the images in a convenient way, using Image Filter is beneficial when you have lots of images to display and images are of different categories. Image Filter also gives better user experience. Image Filter can be used in Websites which are Portfolios, Photography or displaying Products.
What is Isotope JS:
Isotope JS is a JavaScript library that lets you sort and filter categorized content. Using Isotope JS is pretty easy and is very small in size.
Download
You only need the JavaScript file and no other CSS, you can design your personal gallery layout.
Isotope JS is free for Personal Use like project but has to be purchased for Commercial website.
Isotope JS is used by many websites such as : New York Times, Comedy Central, USA Rugby etc.
Using Isotope JS:
To use Isotope JS the easiest way is to use the
1. Class selector and categories the element that will be Filtered or Sorted.
2. Then initialize the JS by selecting Gallery Parent Container.
3. Set Up the other necessary JQuery and JavaScript code.
Here is a demo usage of Isotope JS:
HTML Code
<![CDATA[
<!--The Button for Selectiion, data-filter attribute is added for categorizing-->
<div class="button-group filters-button-group">
<button class="button is-checked" data-filter="*">Show all</button>
<button class="button" data-filter=".Tourism">Tourism</button>
<button class="button" data-filter=".Animals">Animals</button>
<button class="button" data-filter=".Nature">Nature</button>
<button class="button" data-filter=".Graphic">Graphic Design</button>
</div>
<!--The Button for Selectiion, data-filter attribute is added for categorizing-->
<div class="grid">
<a href="" class="grid-item Tourism" style="background-image: url('Gallery/Images/img (1).jpeg');">
<p>Title of The Links</p>
</a>
<a href="" class="grid-item Tourism" style="background-image: url('Gallery/Images/img (2).jpeg');">
<p>Title of The Links</p>
</a>
<a href="" class="grid-item Nature Animals" style="background-image: url('Gallery/Images/img (4).jpeg');">
<p>Title of The Links</p>
</a>
<a href="" class="grid-item Tourism" style="background-image: url('Gallery/Images/img (5).jpeg');">
<p>Title of The Links</p>
</a>
<a href="" class="grid-item Graphic" style="background-image: url('Gallery/Images/img (5).jpg');">
<p>Title of The Links</p>
</a>
<a href="" class="grid-item Nature" style="background-image: url('Gallery/Images/img (6).jpg');">
<p>Title of The Links</p>
</a>
<a href="" class="grid-item Nature Animals" style="background-image: url('Gallery/Images/img (1).jpg');">
<p>Title of The Links</p>
</a>
</div>
]]>
CSS Code
<![CDATA[
<style>
.button-group{
display: flex;justify-content: center;
}
.button{
background: linear-gradient(0deg, #c7c7c7, #54545400);
padding: 10px;margin: 10px;display: block;
width: max-content;border-radius: 5px;cursor:pointer;
}
.is-checked{
background: linear-gradient(179deg, #0011bd, darkgrey);color: #fff;
}
.grid{
display: flex;align-items: center;
flex-wrap: wrap;justify-content: center;
}
.grid-item{
width: 30%;background-size: cover;
height: 30vh;margin:1.2%;
display: flex;justify-content: center;
align-items: center;
}
.grid-item p{
margin: 0;
width: 90%;height: 80%;
border: 3px solid;
color:#Fff;opacity: 0;
display: flex; justify-content: center;
align-items: center;z-index: 2;transition: all ease-in-out .2s;
}
.grid-item::after{position: inherit;
content: '';opacity: 0;transition: all ease-in-out .2s;
width:100%;height:100%;background: rgba(0,0,0,0.5);
}
.grid-item:hover:after {opacity: 1;}
.grid-item:hover p{opacity: 1;}
</style>
]]>
JavaScript Code
<![CDATA[
<!-- Link To CDN -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
]]>
<![CDATA[
<!-- Other JS Code -->
<script>
// init Isotope
var $grid = $('.grid').isotope({
itemSelector: '.grid-item',
layoutMode: 'fitRows'
});
// bind filter button click
$('.filters-button-group').on( 'click', 'button', function() {
var filterValue = $( this ).attr('data-filter');
// use filterFn if matches value
filterValue = filterFns[ filterValue ] || filterValue;
$grid.isotope({ filter: filterValue });
});
// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$( this ).addClass('is-checked');
});
});
</script>
]]>
Comments