Create Different And New jQuery Gallery Grid- mb.thumbGrid

mb.thumbGrid
File Size:2821.44 KB
Views Total:251
Last Update:December 31, 2017
Publish Date:December 29, 2017
Official Website:Go to website
License:MIT

A jQuery plugin that is used to display thumbnails in a gallery grid as a slideshow along with the fancy CSS3 transitions is known as mb.thumbGrid. So, when we click on a thumbnail, the great resolution image is displayed in the responsive lightbox that allows it to the navigation with the images and the arrow controls.

How to use it:

1. Include the jQuery library together with jQuery mb.browser plugin :

<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 :

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

3. Insert images into a container as follows :

<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) {}

Done ūüôā

Change Log

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