Medium-Style jQuery Image Enlargement Plugin - Fluidbox

Medium-Style jQuery Image Enlargement Plugin - Fluidbox
File Size: 60.2 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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" media="all" rel="stylesheet" />

2. Include the jQuery library, jQuery imageLoaded library and jQuery fluidbox plugin at the bottom of your page.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.0.4/jquery.imagesloaded.min.js"></script>
<script type="text/javascript" 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. Default settings.

// Dictates how much the longest axis of the image should fill the viewport. 
// The default value will make the image fill 95% of the viewport dimension along its longest axis
viewportFill: 0.95,

// Dictates if the $(window).resize() event should be debounced for performance reason.
debounceResize: true,

// Determines how high up the z-index will all Fluildbox elements be. 
// Leave this option as default, unless you have other relatively or absolutely positioned elements on the page that is messing with Fluidbox appearance.
stackIndex: 1000,

// dictate how much the z-index should change when Fluidbox is toggled
stackIndexDelta: 10,

// Dictates what event triggers closing of an opened Fluidbox. 
// The default setup binds the click handler to the overlay.
closeTrigger: [{
  selector: '.fluidbox-overlay',
  event: 'click'
},{
  selector: 'document',
  event: 'keyup',
  keyCode: 27
}],

// 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,
loadingEle: true

Change log:

2015-03-28

  • v1.4.4

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