Multi-purpose jQuery Photo Gallery Plugin - mbGallery

mbGallery is a powerful and ajax-enabled jQuery plugin that organize a group of images/photos and displays them in a well styled interface like gallery lightbox, image slider, thumbnail grid, inline DOM element, etc. The plugin also has the ability to invoke a photo gallery from any page via ajax technology.

Basic Usage:

1. Include the latest version of jQuery library on the web page.

<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">

2. Upload the mbGallery.js script and CSS folder into your web hosting. Include the mbGallery.js after jQuery library.

<script type="text/javascript" src="inc/mbGallery.js"></script>

3. Create an image/photo gallery using the Html structure as follows.

<div id="demo" class="hide-me"> 

<a class="imgThumb" href="thumbs/01.jpg"></a> <a class="imgFull" href="large/01.jpg"></a>
<div class="imgDesc">Description 01</div>

<a class="imgThumb" href="thumbs/02.jpg"></a> <a class="imgFull" href="large/02.jpg"></a>
<div class="imgDesc">Description 02</div>

<a class="imgThumb" href="thumbs/02.jpg"></a> <a class="imgFull" href="large/03.jpg"></a>
<div class="imgDesc">Description 03</div>

...

</div>

4. Make the gallery hidden on page load.

.hide-me {
display: none;
}

5. Create an Html element to toggle the image/photo gallery in a gallery lightbox with fullscreen overlay.

<span onclick="$('#demo').mbGallery({
maskBgnd:'#ccc',
minWidth: 50, 
minHeight: 50, 
overlayOpacity:.9,
startFrom: 5,
addRaster:true, 
printOutThumbs:false,
galleryTitle:'My gallery'
});">
Click to open a gallery lightbox</span>

6. All default settings and callback events.

containment:"body",
cssURL:"css/",
skin:"white",
overlayBackground:"#333",
exifData:false, //todo

printOutThumbs:false,

galleryTitle:"My Gallery",
imageSelector: ".imgFull",
thumbnailSelector: ".imgThumb",
titleSelector: ".imgTitle",
descSelector: ".imgDesc",

minWidth: 50,
minHeight: 50,
maxWidth: 0,
maxHeight: 0,
fullScreen:true,
addRaster:false,
overlayOpacity:.5,
startFrom: 1,//"random"
fadeTime: 500,
slideTimer: 6000,
autoSlide: true,

onOpen:function(){},
onBeforeClose:function(){},
onClose:function(){},
onChangePhoto:function(){}

Changelog:

2019-02-18

• v1.3.1

---

This awesome jQuery plugin is developed by pupunzi. For more Advanced Usages, please check the demo page or visit the official website.