jQuery Portfolio Gallery with Categories Filter

Plugin Preview

Share this:

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:	11 months ago
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”.

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

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

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

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

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