jQuery Portfolio Gallery with Categories Filter

A lightweight, cross-browser and mobile friendly plugin for jQuery to create portfolio gallery with categories filter. The Mau Gallery mainly built with Bootstrap 4 and jQuery. It auto generates tags / category to the top or bottom of the images grid. User can filter images through these categories.

Plugin Preview

jQuery Portfolio Gallery with Categories Filter

How to start using jQuery?

More jQuery Top, Best and New Plugins

Top 100 jQuery Plugins

Plugin Overview

Plugin:	Mau Gallery
Author:	Eleftherios Psitopoulos
Licence:	MIT Licence
Published:	May 20, 2019
Repository:	Fork on GitHub
Dependencies:	jQuery 1.3.1 or Latest version and Bootstrap 4.1.3
File Type:	zip archive (HTML, CSS & JavaScript )
Package Size:	77.9 KB

Demo Download

How to Use Portfolio Gallery

1. 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>

2. After that, include Mau Gallery‘s JavaScript file into your page.

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

3. Create markup for portfolio gallery and add your image links in. Add data-gallery-tag attribute for grouping your images in categories. These tag will be used to filter category.

<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">
   <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>

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

$(document).ready(function() {

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

});

Options for jQuery Portfolio Gallery with Categories

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

Option	Description, Default, Type
`columns`	Define the columns for portfolio gallery. Default: 3, Type: Number. EXAMPLE $('.gallery').mauGallery({ columns: 4, });
`lightbox`	Decide weather to show images in Bootatrap modal / lightbox on click. Default: true, Type: Boolean. EXAMPLE $('.gallery').mauGallery({ lightBox: true, });
`lightboxId`	Define the unique id for lightbox. Default: null, Type: String. Pass the id in string. EXAMPLE $('.gallery').mauGallery({ lightboxId: 'myAwesomeLightbox', });
`showTags`	Enable / disable category based filter. Default: true, Type: Boolean. EXAMPLE $('.gallery').mauGallery({ showTags: true, });
`tagsPosition`	Define the position for tags / categories where should they appear. Default: “bottom”, Type: String. Available options are: ‘bottom’ \| ‘top’ EXAMPLE $('.gallery').mauGallery({ tagsPosition: 'bottom' });