jQuery Portfolio Gallery with Categories Filter

May 20, 2019 admin Gallery, Portfolio 0

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

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. 

$('.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'
});

Related jQuery Plugins: