jQuery Portfolio Gallery with Categories Filter

A simple lightweight, cross-browser and responsive plugin for jQuery to create a portfolio gallery with categories filter.  Its main builds with Bootstrap 4 & jQuery.

Moreover, the plugin automatically generates the tags or category to the top or bottom of the image grids. The user can filter the images using these categories.

The “Mau Gallery” has few very nice features and one of them is the lightbox. When the user clicks on any image, they can see a bigger version of that image.

In addition, it allows you to place text blocks in between the image grid. It is a mobile-friendly filter gallery that is easy to customize.

You can use this gallery to build a nice looking photo or text portfolio grids and let your site visitor filter it quickly.

How to Create a Portfolio Gallery with Filter

To create the filter gallery on your website, you need to load the Bootstrap framework in your web page just after the jQuery to getting started with Mau Gallery.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<!-- Popper Js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/popper.min.js"></script>

After loading the jQuery and Boostrap Frame files, you need to include Mau Gallery‘s JavaScript file into your page.

<!-- Mau Gallery Js -->
<script src="assets/mauGallery.min.js"></script>

After that, Let’s create the markup for the portfolio gallery and add your image links in. Simply add data-gallery-tag an attribute for grouping your images in categories.

These tags will be used to filter categories. You can also define a text block in between the image grid but this will not support the filter.

<div class="gallery" style="display:none;">
	<img data-gallery-tag="women" class="gallery-item" src="path/to/your-image.jpg">
	<img data-gallery-tag="men" class="gallery-item" src="path/to/your-image.jpg">
	<img data-gallery-tag="coffee" class="gallery-item" src="path/to/your-image.jpg">
	<div class="gallery-item h-100">
		<div class="bg-warning d-flex flex-column text-dark justify-content-center align-items-center h-100 w-100 p-3">
			<p class="lead m-0">You can't filter me!</p>
		</div>
	</div>
	<img data-gallery-tag="men" class="gallery-item" src="path/to/your-image.jpg">
	<img data-gallery-tag="dogs" class="gallery-item" src="path/to/your-image.jpg">
</div>

Initialize the plugin in jQuery document ready function with all default settings.

$(document).ready(function() {

    $('.gallery').mauGallery();

});

Plugin Options for jQuery Portfolio Gallery with Categories

The following are some advanced configuration options to create a “portfolio gallery”.

$('.gallery').mauGallery({
   columns: 4,
});

$('.gallery').mauGallery({
   lightBox: true,
});

$('.gallery').mauGallery({
   lightboxId: 'myAwesomeLightbox',
});

$('.gallery').mauGallery({
    showTags: true,
});

$('.gallery').mauGallery({
   tagsPosition: 'bottom'
});