Minimalist jQuery Image Gallery & Lightbox Plugin - jGallery

Minimalist jQuery Image Gallery & Lightbox Plugin - jGallery
File Size: 169 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

jGallery is a super simple jQuery gallery plugin which allows you to display grouped images in a responsive lightbox slider.

Basic Usage:

1. Include the jQuery jGallery plugin's files after jQuery JavaScript library.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="scripts/jquerygallery.js"></script>
<link rel="stylesheet" href="styles/jquerygallerystyle.css">

2. Insert a group of thumbnails with links pointing to the sources of large images into your document like this:

<div class="images">
  <a href="large-1.jpg">
    <img class="thumbnail" src="thumb-1.jpg"/>
  </a>
  <a href="large-2.jpg">
    <img class="thumbnail" src="thumb-2.jpg"/>
  </a>
  <a href="large-3.jpg">
    <img class="thumbnail" src="thumb-3.jpg"/>
  </a>
  ...
</div>

3. Create DIV elements for the lightbox.

<div class="backdrop"></div>
<div class="box"></div>

4. Add next/prev navigation and a close button to the lightbox.

<div class="selectors">
  <img class="nextimg" src="sprites/next_arrow.png">
  <img class="previmg" src="sprites/prev_arrow.png">
</div>
<img id="close" src="sprites/close.png">

Change log:

2014-11-06

  • Added support for devices under 800px width, removed close button

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