Minimal Clean Image Lightbox Plugin - LightZoom

LightZoom is a minimal, clean, configurable and fully responsive image lightbox plugin for displaying large images with custom description, fade animation and CSS3 based loading indicator.

How to use it:

1. Include the Stylesheet style.css and JavaScript file lightzoom.js after jQuery library (slim build is recommended).

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<link href="src/css/style.css" rel="stylesheet">
<script src="src/js/lightzoom.js"></script>

2. Add a link with the class of lightzoom to your thumbnail image.

<a href="large.jpg" class="lightzoom">
  <img src="thumbnail.jpg" alt="Image Alt">
</a>

3. Optionally, you can define the description display in the lightbox using the title attribute.

<a href="large.jpg" class="lightzoom">
  <img src="thumbnail.jpg" alt="Image Alt" title="Image Description">
</a>

4. Initialize the image lightbox with default options.

$(function(){

  $('.lightzoom').lightzoom();

});

5. All customization options that you can overwrite as you like.

$('.lightzoom').lightzoom({

  // animation speed in ms
  speed:                  400,

  // padding in pixels
  imgPadding:             10,

  // opacity of background overlay
  overlayOpacity:         '0.5',

  // show image description
  viewTitle:              false,

  // close by clicking overlay
  isOverlayClickClosing:  false,

  // close by clicking lightbox
  isWindowClickClosing:   false,

  // close by pressing ESC key
  isEscClosing:           false

});

---

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