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.

Features:

  • 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",'+
       '"2.jpg",'+
       '"3.jpg",'+
       '"4.jpg",'+
       '"5.jpg",'+
       '"6.jpg" ] } }';
addGallery(json);

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

enableExtraButtons();

5. Set the transition effect you prefer:

  • opacity
  • zoomin
  • slide
  • slideAndZoom
  • slideZoom
  • ZoominFast
  • bounce
  • puffzoom
setGalleryTransition("zoomin");

6. Set the gallery style you prefer:

  • tiles
  • center
  • Circles
  • full
setGalleryStyle("mosaic");

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

enableAutoWidth();

8. Set the background color of the gallery lightbox.

backgroundColor("#444444");

Changelog:

2021-07-26

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