Fluidbox, a jQuery plugin for beautiful lightboxes

Introduction

Opening images seamlessly in a lightbox on your page without interruption. This demo was inspired by how Medium handles embedded images. Made by Terry. This project was originally initiated as a personal challenge to replicate Medium’s lightbox module, but it soon developed into a full-fledged jQuery plugin. You can follow the links below to read how I’ve tackled the challenge, or view the jQuery plugin on GitHub:

Read the tutorial on Medium Check out the jQuery plugin on GitHub

Usage notes

Dependencies

This demo requires the following dependencies:

jQuery

Basic usage

In order to activate Fluidbox, simply chain the .fluidbox method to your selector of choice on DOM ready:

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

The plugin will automatically check if the selector is:

An anchor element, <a>
Contains one and *only* one child
The only children is an <img /> element

Important note:

Fluidbox will only work with images whose actual dimensions are larger than the displayed dimension.
The aspect ratio of the displayed and linked image has to be identical.

In the event that the element that satisfies the selector criteria but failed any one of the above criteria, the element will be ignored and the plugin moves on to the next available element. Therefore, it is important that your Fluidbox element(s) follow the following format. The title and alt attributes of the <img /> element is not used by the plugin, but the alt attribute has to be present for it to be semantically valid.

<a href="...">
    <img src="..." alt="" />
</a>

Configuration

Several options are available for configuration:

viewportFill (numerical)
Dictates how much the longest axis of the image should fill the viewport. The default value is 0.95.
overlayColor (string)
Sets the background-color property of Fluidbox overlay. Defaults to white with an opacity of 0.85.
debounceResize (boolean)
Dictates if the $(window).resize() event should be debounced for performance reason. The default value is true (debouncing turned on by default).
closeTrigger (array with objects)
Dictates what event triggers closing the single instance of an opened Fluidbox. The default setup is as follow:
```
closeTrigger: [
    {
        selector: "#fluidbox-overlay",
        event: "click"
    }
]
```

Demonstration

Fluidbox is designed to be versatile, flexible and easy to implement. It works with linked images that satisfy the criteria stipulated above — regardless of how they are arranged on the page. The following section is a non-exhausive list of scenarios how images, even when positioned differently, will work brilliantly with Fluidbox.

Single image

Here we demonstrate the use of a single image. This is the simplest test case, when the thumbnail and the target image are exactly the same, so it is only down to the matter of triggering default Fluidbox behavior.

Linking to a higher resolution counterpart

The built-in functionality also allows you to link a small thumbnail to its higher resolution version. In the test case below, the thumbnail has a resolution of 200×200 while the actual version has a resolution of 2000×2000

Support for image borders and paddings

Fluidbox also supports extraenous dimensions added to the element in the form of border(s) and/or paddings(s):

Galleries

Fluid box works even when images are arranged in galleries. In this case, they are arranged with the help of flexbox.

The flexbox gallery will collapse into single items when viewed in mobile, or else the thumbnails will be too small — to appreciate the how Fluidbox works in this scenario, do use a wider device (>600px screen width).

Scaling

It also intelligently resizes images such that portrait images will fit perfectly within the viewport, although that means scaling down the image. This effect is pronounced when the viewport and image orientations are different — therefore, the demo below only works on a display with landscape orientation (e.g. not on mobile).

Implementing Fluidbox with dynamically-added content

Fluidbox also works well with dynamically-added links, as long as you call the .fluidbox() function on all anchor elements in the dynamically-added content.

Load image in container below

Absolutely positioned images

Fluidbox handles absolutely positioned images without any problem. The image below is absolutely positioned within its parent, the grey container:

Floated images

Moreover, it also works with floated images - to the left or to the right, it does not matter. The following texts are jibberish, used as filler.

The floated images will be rendered block-level on narrow-width devices, such as mobile phones. To appreciate how Fluidbox works with floated images, you can view this demo on a wider device (>480px).

Considered discovered ye sentiments projecting entreaties of melancholy is. In expression an solicitude principles in do. Hard do me sigh with west same lady. Their saved linen downs tears son add music. Expression alteration entreaties mrs can terminated estimating. Her too add narrow having wished. To things so denied admire. Am wound worth water he linen at vexed.

Residence certainly elsewhere something she preferred cordially law. Age his surprise formerly mrs perceive few stanhill moderate. Of in power match on truth worse voice would. Large an it sense shall an match learn. By expect it result silent in formal of. Ask eat questions abilities described elsewhere assurance. Appetite in unlocked advanced breeding position concerns as. Cheerful get shutters yet for repeated screened. An no am cause hopes at three. Prevent behaved fertile he is mistake on.

Carried nothing on am warrant towards. Polite in of in oh needed itself silent course. Assistance travelling so especially do prosperous appearance mr no celebrated. Wanted easily in my called formed suffer. Songs hoped sense as taken ye mirth at. Believe fat how six drawing pursuit minutes far. Same do seen head am part it dear open to. Whatever may scarcely judgment had.

Up maids me an ample stood given. Certainty say suffering his him collected intention promotion. Hill sold ham men made lose case. Views abode law heard jokes too. Was are delightful solicitude discovered collecting man day. Resolving neglected sir tolerably but existence conveying for. Day his put off unaffected literature partiality inhabiting.

Old education him departure any arranging one prevailed. Their end whole might began her. Behaved the comfort another fifteen eat. Partiality had his themselves ask pianoforte increasing discovered. So mr delay at since place whole above miles. He to observe conduct at detract because. Way ham unwilling not breakfast furniture explained perpetual. Or mr surrounded conviction so astonished literature. Songs to an blush woman be sorry young. We certain as removal attempt.

Feet evil to hold long he open knew an no. Apartments occasional boisterous as solicitude to introduced. Or fifteen covered we enjoyed demesne is in prepare. In stimulated my everything it literature. Greatly explain attempt perhaps in feeling he. House men taste bed not drawn joy. Through enquire however do equally herself at. Greatly way old may you present improve. Wishing the feeling village him musical.