Minimal Clean Image Lightbox Plugin - LightZoom

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.

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.

  • Publication date: 13.07.2018
  • Source