Simple Image Lightbox Plugin For jQuery - frydBox

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,
  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
  
});

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

  • Publication date: 02.11.2017
  • Source