This time I will share jQuery Plugin and tutorial about Multi-purpose jQuery Photo Gallery Plugin – mbGallery, hope it will help you in programming stack.
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.
2. Upload the mbGallery.js script and CSS folder into your web hosting. Include the mbGallery.js after jQuery library.
1 |
<script type="text/javascript" src="inc/mbGallery.js"></script> |
3. Create an image/photo gallery using the Html structure as follows.
01 |
<div id="demo" class="hide-me"> |
03 |
<a class="imgThumb" href="thumbs/01.jpg"></a> <a class="imgFull" href="large/01.jpg"></a> |
04 |
<div class="imgDesc">Description 01</div> |
06 |
<a class="imgThumb" href="thumbs/02.jpg"></a> <a class="imgFull" href="large/02.jpg"></a> |
07 |
<div class="imgDesc">Description 02</div> |
09 |
<a class="imgThumb" href="thumbs/02.jpg"></a> <a class="imgFull" href="large/03.jpg"></a> |
10 |
<div class="imgDesc">Description 03</div> |
4. Make the gallery hidden on page load.
5. Create an Html element to toggle the image/photo gallery in a gallery lightbox with fullscreen overlay.
01 |
<span onclick="$('#demo').mbGallery({ |
09 |
galleryTitle:'My gallery' |
11 |
Click to open a gallery lightbox</span> |
6. All default settings and callback events.
04 |
overlayBackground:"#333", |
09 |
galleryTitle:"My Gallery", |
10 |
imageSelector: ".imgFull", |
11 |
thumbnailSelector: ".imgThumb", |
12 |
titleSelector: ".imgTitle", |
13 |
descSelector: ".imgDesc", |
28 |
onBeforeClose:function(){}, |
30 |
onChangePhoto:function(){} |
Changelog:
2019-02-18
This awesome jQuery plugin is developed by pupunzi. For more Advanced Usages, please check the demo page or visit the official website.
