Medium-Style jQuery Image Enlargement Plugin - Fluidbox

Fluidbox is a nice jQuery plugin to enlarge and resize images in a lightbox with fluid transitions, as you seen on Medium.

Features:

• Responsive design for all the modern devices.
• Allows you to link a small thumbnail to its higher resolution version. 
• Works even when images are arranged in galleries. In this case, they are arranged with the help of flexbox.
• It also intelligently resizes images such that portrait images will fit perfectly within the viewport, although that means scaling down the image.
• Moreover, it also works with floated images - to the left or to the right, it does not matter.

Basic Usage:

1. Include jQuery Fluidbox plugin's CSS file in the head section of your page.

<link type="text/css" href="./css/fluidbox.css" rel="stylesheet" />

2. Include the jQuery library, jQuery jquery-throttle-debounce library (optional but recommended) and jQuery fluidbox plugin at the bottom of your page.

<script src="jquery.min.js"></script>
<script src="jquery.ba-throttle-debounce.min.js"></script>
<script src="jquery.fluidbox.js"></script>

3. Add a link to your image.

<a href="1.jpg"><img src="1.jpg" alt="ALT" title="TITLE" /></a>

4. Initialize the plugin with one JS call.

$(function () {
  $('a').fluidbox();
});

5. The plugin also works with the modern HTML5 picture element.

<a href="full.jpg" title="">
  <picture>
    <source media="(max-width: 480px)" srcset="small.jpg">
    <source media="(min-width: 1280px)" srcset="full.jpg">
    <img src="medium.jpg" alt="Image Alt" />
  </picture>
</a>

6. All default settings to config the lightbox.

$('a').fluidbox({

  // Launches the Fluidbox instance immediately when a click event is triggered, 
  // regardless of whether the target/linked image has been preloaded. 
  // When this value is set to true, the custom events delayedloaddone and 
  // delayedreposdone will be fired when the target/linked image is subsequently 
  // loaded and the ghost image dimensions being recomputed.
  immediateOpen: false,

  // Shows a loader when loading images.
  loader: false,

  // Max width/height of the enlarged image
  maxWidth: 0,
  maxHeight: 0,

  // in ms
  resizeThrottle: 500,

  // Stack z-index 
  stackIndex: 1000,

  // How much the z-index will fluctuate from stackIndex in order to allow visually-correct stacking of Fluidbox instances
  stackIndexDelta: 10,

  // How much the longest axis of the image should fill the viewport
  viewportFill: 0.95
  
});

Changelog:

v2.0.5 (2017-02-22)

• Absent mindedly forgot to bump npm version
• Missing imageloaddone custom event, even though it's in the readme (and previously implemented)
• Incorrect parsing of HTML5 data- attributes
• Cleaner CSS transitions
• Usability improvement: listening to escape key press to close Fluidbox

---

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