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

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.

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

Decide weather to show images in Bootatrap modal / lightbox on click. Default: true, Type: Boolean.

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

Define the unique id for lightbox. Default: null, Type: String.
Pass the id in string.

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

Enable / disable category based filter. Default: true, Type: Boolean.

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

Define the position for tags / categories where should they appear. Default: “bottom”, Type: String.
Available options are: ‘bottom’ | ‘top’

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