Simple Image Lightbox Plugin For jQuery - frydBox

File Size: 18.5 KB
Views Total: 2704
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Simple Image Lightbox Plugin For jQuery - frydBox

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


  • 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">

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

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

<script src="//"></script>
<script src="jquery.frydBox.min.js"></script>

3. Initialize the jQuery frydBox plugin with default options.

// single image

// image group

4. Default configuration options to customize the lightbox.


  // 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:


  • fix for internet explorer and safari, corrected calculating sizes


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


  • lazyLoadingStart option, navigation images optimization and other improvements


  • Implemented callback functions and animated loader


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


  • 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.