Download
Replicating and improving the lightbox module seen on Medium with fluid transitions. 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. Each initialized Fluidbox instance can therefore be styled independently from each other using CSS alone, requiring no further manipulation via JS (unless required on the user's behalf for specific implementations). Fluidbox listens to the click event triggered on the ghost element, .fluidbox__ghost, and toggles between two binary states, open or closed. TThe latest version of Fluidbox require two dependencies: jQuery v1.7 or above, and Ben Alman's debounce/throttle plugin.
Features
- The plugin is relatively lightweight
- Fluidbox is part of the vast collection of libraries proudly hosted by CDNJS
- Fluidbox has been implemented on other sites in the wild, too
- It is rather straightforward to use Fluidbox
- In your JS file, you can simply chain the .fluidbox() method to your selector on DOM ready
- Public functions and custom triggers
Project Samples
