This is a simple lightbox class built with CoffeeScript. See the demo at recurving.github.io/lightbox.
Inspired by Fluidbox and how Medium handles images I wanted to make a lightbox module using CSS-transforms without having blurry edges caused by sub-pixel positioning. Also it should fit more my needs as I am mostly using this method to resize images (for example in this grid layout module).
The HTML img tag can have these attributes:
data-max-heightis the maximum size the image can have
data-image-largethe image to replace the
It looks like this then:
<img src="small.jpg" width="384" height="256" data-image-large="large.jpg" data-max-width="1500" data-max-height="1000">
Clicking on any image will open a lightbox with this image centered on the screen with the maximum size possible. By default the script opens every image in a lightbox (but you can change the selector of course). There is also a padding of 16 pixels which can be changed. The lightbox will be closed by resizing the browser (without animation), scrolling or pressing ESC (with animation). One can cycle through the images using the arrow keys.