Dynamic Gallery Lightbox In jQuery - Gallery.js

Dynamic Gallery Lightbox In jQuery - Gallery.js
File Size: 16.5 KB
Views Total: 623
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

A responsive, easy-to-use, user-friendly jQuery gallery lightbox plugin designed to provide an elegant image viewing experience on the webpage.


  • Navigate between images like a slider.
  • Image zoom in/out.
  • Share images on Facebook and Twitter.
  • Open the original image in a new tab.
  • 8 pretty cool transition effects.

How to use it:

1. Load the Gallery.js plugin's files in the document.

<!-- jQuery & jQuery UI -->
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/jquery-ui.min.js"></script>

<!-- jQuery Gallery.js Plugin -->
<link rel="stylesheet" href="/path/to/gallery.min.css" />
<script src="/path/to/gallery.min.js"></script>

2. Create a container to hold the image gallery.

<div class="Gallery"></div>

3. Add images and a headline to the Gallery.

json = '{ "Entry": { "Title": "Gallery Tigle", '+
       '"Image": ["1.jpg",'+
       '"6.jpg" ] } }';

4. Determine whether to enable extra buttons (social media, zoom, image link, etc).


5. Set the transition effect you prefer:

  • opacity
  • zoomin
  • slide
  • slideAndZoom
  • slideZoom
  • ZoominFast
  • bounce
  • puffzoom

6. Set the gallery style you prefer:

  • tiles
  • center
  • Circles
  • full

7. Determine whether to auto set the gallery width on window resize.


8. Set the background color of the gallery lightbox.




  • Added Mosaic Style

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