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. $('.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. $('.gallery').mauGallery({ tagsPosition: 'bottom' }); |
Leave a Reply