Fluidbox
If you're using Fluidbox for production, use the latest stable release and not the edge release (latest commit).
Replicating and improving the lightbox module seen on Medium with fluid transitions. View demo here. For users who are looking for a quick setup and/or troubleshooting process, refer to basic usage, but do not forget to read the usage precautions and frequently asked questions.
Although not thoroughly tested, Fluidbox should be working in IE ≥10 and all versions of Chrome, Firefox, Safari, iOS Safari and Android Chrome, with the exception of Opera Mini. However, I suggest disabling Fluidbox on mobile devices or at small screen resolutions.
Special thanks to the following stellar folks who has helped majorly in making Fluidbox better:
- @hybernaut for refactoring the code and reorganizing functions
- @maxee for implementation of a new feature that enables differential image ratios between thumbnails and linked image
- @benwhilhelm for suggesting the immedate open option in Fluidbox. Ben has author a PR, but I have found some issues that I cannot resolve. However, I have adopted his idea and simplified the implementation in v1.4.3.
- @jaechick for creating the LESS file for Fluidbox stylesheet, even though the LESS file is removed from the project as the stylesheet is now being preprocessed by SASS.
- @_mattbailey for his awesome guide towards integrating Grunt into a project. This has made building Fluidbox a lot easier.
- @DJDavid98 for enabling proper parsing of backgorund image URLs. Note that the URL provided still has to be RFC3986-compliant.
- @Gaya for fixing the blurry image issue on OS X / macOS.
- @Mesoptier for cleaning up messy CSS transition declarations.
In addition, a shoutout to:
- jQuery Boilerplate for their good-to-boot, easy-to-use and standardized jQuery plugin template. Fluidbox is built on the extended version.
- David Walsh and Jonathan Suh for their insight on listening to
transitionendevents
Introduction
Fluidbox was initially a simple personal challenge I set myself, with two simple aims—to replicate the distraction-free, fluid lightbox seen on Medium, and to improve on it such that it will allow linking to a larger-resolution image. The plugin deals with higher resolution, linked images elegantly, such that it only preloads them when users click on the thumbnails, therefore conserving bandwidth usage for your visitors and your server(s).
The plugin is relatively lightweight: 8.74kb (2.71kb after gzipped) for the minified JS file, and 2kb (667b after gzipped) for the minimal stylesheet.
You can read my article on Medium about how I got inspiration for this little project of mine, and the basic mechanisms behind the plugin. Some serious math is involved (nah, not really).
Moreover, you can visit the demo of this plugin on the project page hosted with GitHub. The plugin v1.22 and onwards (uncompressed, minified and its associated CSS file) is hosted with CDNJS.
In the wild
Fluidbox is part of the vast collection of libraries proudly hosted by CDNJS. You can reference all versions of Fluidbox published hitherto from there.
Fluidbox has been implemented on other sites in the wild, too—check it out:
- Gemma Busquets by @imgemmabusquets
- Highlight portfolio theme by 500px
- Terry Mun by myself
To add your site that has implemented Fluidbox, or an article/tutorial you have written on Fluidbox use and/or application, feel free to write to me at @teddyrised.
Installation
To install Fluidbox, you will have to include the following resources in your page. The JS files should be loaded in the order stipulated below. For the CSS file, you can either incorporate it with your site's stylesheet, or load it externally through the <link> element in <head>.