Simple Image Lightbox Plugin For jQuery - frydBox

frydBox is a simple, mobile-friendly, fully configurable jQuery lightbox plugin for images and image galleries.

Features:

• Image lazy loading.
• Supports both single image and grouped images.
• Keyboard arrow keys to navigate between images.
• Click the current image to goto next image.
• Fade and slide animations.

How to use it:

1. Insert your image(s) to the web page.

<!-- Single Image -->
<a id="single" href="large.jpg">
  <img src="thumbnail.jpg">
</a>

<!-- Image Group -->
<a class="myGallery" href="large-1.jpg">
  <img src="thumb-1.jpg">
</a>
<a class="myGallery" href="large-2.jpg">
  <img src="thumb-2.jpg">
</a>
<a class="myGallery" href="large-3.jpg">
  <img src="thumb-3.jpg">
</a>

2. Insert jQuery JavaScript library and the jQuery frydBox plugin's script jquery.frydBox.min.js into the web page.

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="jquery.frydBox.min.js"></script>

3. Initialize the jQuery frydBox plugin with default options.

// single image
$("#single").frydBox();

// image group
$(".myGallery").frydBox();

4. Default configuration options to customize the lightbox.

$(".myGallery").frydBox({

  // CSS prefix
  prefix: 'frydBox_',

  // enable lazy load
  lazyLoading: true,

  // in milliseconds
  lazyLoadingDelay: 100,
  fadeDuration: 400,

  // fade when move
  fadeWhenMove: true
  moveDuration: 800,

  // from 0 to 1
  screenPercent: 0.88,
  backOpacity: 0.6,
  shadowOpacity: 0.6,

  // more options
  shadowSize: 18,
  borderSize: 13,
  borderColor: 'white',
  borderRadius: 8,

  // enable scrollbar
  scrollBars: false,

  // previous image url
  prevImage: false,

  // next image url
  nextImage: false,

  // close image url
  closeImage: false,

  // shows loader
  showLoader: true,
  
});

Change log:

2018-01-28

• fix for internet explorer and safari, corrected calculating sizes

2018-01-13

• lock navigation during slide and ensure to hide all images after modal closes

2018-01-12

• lazyLoadingStart option, navigation images optimization and other improvements

2018-01-07

• Implemented callback functions and animated loader

2017-12-28

• next, prev and close navi images option and some improvements

2017-12-19

• Added 'Fade On Move' option.

---

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