Dynamic Gallery Lightbox In jQuery - Gallery.js

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

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


  • Navigate between images/videos 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. Or insert images & videos via HTML instead of JavaScript.

<div class="Gallery">
  <img src="https://dummyimage.com/800x400/00ff00/00ff00" />
  <img src="https://dummyimage.com/800x400/ffff00/00ff00" />
  <img src="https://dummyimage.com/800x400/00ffff/00ff00" />
  <img src="https://dummyimage.com/800x400/0fff00/00ff00" />
  <img src="https://dummyimage.com/800x400/0000ff/00ff00" />
  <img src="https://dummyimage.com/800x400/ff0000/00ffff" />
  <img src="https://dummyimage.com/800x400/0000ff/ffff66" />
  <img src="https://dummyimage.com/800x400/00ff00/ff3300" />
  <video width="320" height="240" autoplay="" muted="" loop="">
  <video width="320" height="240" autoplay="" muted="" loop="">

5. Create an image slider. You can also enlarge the images in a galler lightbox on click.

<div class="GallerySlide">
  <!-- Left Arrow -->
  <svg onClick="gallerySlideLeft()" class="nav_left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="48px" height="48px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"/></svg>
  <!-- Slide Images -->
  <img class="codeImage galleryJS" width="600px" height="324px" src="https://dummyimage.com/800x400/aa550/fff000" alt="source code">
  <img class="codeImage galleryJS addFill" width="600px" height="324px" src="https://dummyimage.com/800x400/ff0000/000" alt="source code">
  <img class="codeImage galleryJS" width="600px" height="324px" src="https://dummyimage.com/800x400/00ff00/00ff00" alt="source code">
  <img class="codeImage galleryJS" width="600px" height="324px" src="https://dummyimage.com/800x400/0000ff/0000ff" alt="source code">
  <!-- Right Arrow -->
  <svg onClick="gallerySlideRight()" class="nav_right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="48px" height="48px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>
<!-- Pagination Dots -->
<div class="GallerySlideDots"></div>
//animation duration, enable/disable animation , enable/disable dots under the slider
JavaScriptGallery.initGallerySlide(300, true, true);

6. Initialize the plugin on a single image. You can use this methoed create a fullscreen image viewer.

  class="galleryJS addToGallery"

7. Move the image on window resize.

<move id="move_123" mediaquery="768"></move>
<img id="element_123" src="1.jpg" />

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


9. Set the transition effect you prefer:

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

10. Set the gallery style you prefer:

  • tiles
  • center
  • Circles
  • full
  • mosaic

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


12. Set the background color of the gallery lightbox.


13. Enable double click in gallery viewer.


14. Allow ESC key to dimiss the gallery.



v0.2.0 (2022-01-24)

  • All functions were converted to methods in the JavaScriptGallery() class.


  • Added Debug() function
  • Added new comment


  • 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.