Stylish jQuery Gallery Grid with Lightbox Support - mb.thumbGrid

File Size: 9.49 MB
Views Total: 26565
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Stylish jQuery Gallery Grid with Lightbox Support - mb.thumbGrid

mb.thumbGrid is a jQuery gallery plugin used to display a grid of thumbnails as a slideshow with fancy CSS3 transitions. When you click on a thumbnail, the high resolution image will be displayed in a responsive lightbox that allows you to navigation through images with arrow controls.

How to use it:

1. Include the jQuery library together with jQuery mb.browser plugin and jQuery mb.CSSAnimate plugin in the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/jquery.mb.browser.min.js"></script>
<script src="js/jquery.mb.CSSAnimate.min.js"></script>

2. Include the jQuery mb.thumbGrid's script and CSS after jQuery library.

<script src="js/jquery.mb.thumbGrid.js"></script>
<link rel="stylesheet" href="css/thumbGrid.css">

3. Insert images into a container as follows. Use the data-highres attribute to specify the high-res image sources. All the options can be passed via Javascript on initialization or via Html5 data-attributes in container element.

<div id="thumbGrid"
     data-thumbgrid="true"
     data-effect="scaleIn"
     data-delay="60"
     data-timing="800"
     data-pagination="6"
     data-galleryeffectnext="scaleIn"
     data-galleryeffectprev="scaleOut">

  <img src="img/thumb-1.jpg"
     alt="img01"
     data-highres="large-1.jpg"
     data-caption="Image caption">

  <img src="img/thumb-2.jpg"
     alt="img02"
     data-highres="large-2.jpg"
     data-caption="Image caption">

  <img src="img/thumb-3.jpg"
     alt="img03"
     data-highres="large-3.jpg"
     data-caption="Image caption">

...

</div>

4. Initialize the plugin.

jQuery("[data-thumbgrid]").thumbGrid();

5. Options and defaults.

// zoom, fade_zoom, slide_vertical
// slide_horizontal, slide_inverse, rotate
nav_effect: "slide_horizontal",
nav_delay: 60,
nav_delay_inverse: 1,
nav_timing: 800,
nav_pagination: 6,
nav_show: true,

// zoom, fade_zoom, slide_vertical
// slide_horizontal, slide_inverse, rotate
gallery_effect: "slide_horizontal",
gallery_timing: 500,
gallery_cover: false,
thumb_fit: false,
full_inline: false,
full_inline_height: 500,
gallery_fullscreen_w: "100%",
gallery_fullscreen_h: "100%",
showIndexinFullscreen: false,
clever_transition: true,
ease: "cubic-bezier(0.19, 1, 0.22, 1)",
thumb_ratio: 1,

// callbacks
onSlide           : function (grid) {},
onFullScreen      : function (grid) {},
onExitFullScreen  : function (grid) {},
onFullscreenChange: function (grid) {}

Change logs:

2018-05-05

  • v1.3.1

2017-12-04

  • Bug fix for full inline gallery when lunched the lightbox

2017-11-29

  • Bug fix: transitions were not always correct

2017-11-27

  • New feature: inline gallery

2017-05-12

  • v1.3.1: various fix

2016-07-02

  • various fix

2016-06-24

  • update and fix for jQuery 3.0.0

2015-09-16

  • various fix

2015-06-28

  • Added some event callbacks and the possibiliti to manage content different that images inside the gallery.

2015-06-24

  • various fix

2015-06-08

  • Implemented touch device support with swipe functionality

2015-05-27

  • various fix

2015-05-21

  • v. 1.3.1

2015-05-18

  • various fix

2015-05-17

  • reformulate the CSS animations for better performance. FF still have problems if filters are applied

2015-05-14

  • Bug fix: if the thumbnail slider animation did not end while changing slide the index of the image to show was lost. Now you can't change slide if the animation is not finished.

2015-05-05

  • various fix

2015-03-25

  • various update

2015-03-18

  • various fix

2015-03-17

  • various fix

2015-01-29

  • various fix

2014-11-20

  • various fix

2014-09-25

  • various fix

2014-09-24

  • various fix

2014-09-16

  • various fix

2014-09-15

  • various fix

2014-09-14

  • various fix

2014-09-07

  • various fix

 


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