jQuery Plugin For Responsive Touch-friendly Lightbox - imageLightbox

jQuery Plugin For Responsive Touch-friendly Lightbox - imageLightbox
File Size: 1.48 MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

A simple, flexible, responsive, touch-friendly jQuery image lightbox/gallery plugin used for showcasing your images in an elegant way.

More features:

  • Presents your images in a configurable lightbox popup.
  • Clicking on the current image will goto the next.
  • Automatically preloads the next image.
  • Image captions.
  • Close & navigation buttons.
  • Configurable background overlay.
  • Keyboard interactions.
  • Works perfectly on both desktop and mobile.

Basic usage:

1. Load the jQuery imageLightbox plugin's files after jQuery as usual.

<link href="src/imagelightbox.css" rel="stylesheet">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="src/imagelightbox.js"></script>

2. Insert your thumbnails into your webpage and link them them to the original images as displayed below:

<a href="1.jpg" data-imagelightbox="demo">
  <img src="thumb-1.jpg">
</a>

<a href="2.jpg" data-imagelightbox="demo">
  <img src="thumb-1.jpg">
</a>

<a href="3.jpg" data-imagelightbox="demo">
  <img src="thumb-3.jpg">
</a>

...

3. If you want to display custom captions at the bottom of the images.

<a href="1.jpg" 
   data-imagelightbox="demo"
   data-ilb2-caption="Caption 1">
  <img src="thumb-1.jpg">
</a>

<a href="2.jpg"
   data-imagelightbox="demo"
   data-ilb2-caption="Caption 2">
  <img src="thumb-1.jpg">
</a>

<a href="3.jpg"
   data-imagelightbox="demo"
   data-ilb2-caption="Caption 3">
  <img src="thumb-3.jpg">
</a>

...

4. Active the image lightbox plugin with default settings.

$('a[data-imagelightbox="demo"]').imageLightbox();

5. All default configuration options.

$('a[data-imagelightbox="demo"]').imageLightbox({
  selector:       'a[data-imagelightbox]',
  id:             'imagelightbox',
  allowedTypes:   'png|jpg|jpeg|gif',
  animationSpeed: 250,
  activity:       false,
  arrows:         false,
  button:         false,
  caption:        false,
  enableKeyboard: true,
  lockBody:       false,
  navigation:     false,
  overlay:        false,
  preloadNext:    true,
  quitOnEnd:      false,
  quitOnImgClick: false,
  quitOnDocClick: true,
  quitOnEscKey:   true
});

Change log:

2017-03-18

  • v0.7.5: clean up

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