This repository has been archived by the owner. It is now read-only.
This is a simple lightbox class built with CoffeeScript.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
source
.gitignore
Gemfile
Gemfile.lock
Rakefile
config.rb
readme.md

readme.md

Lightbox

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).

Example usage

The HTML img tag can have these attributes:

  • data-max-width and data-max-height is the maximum size the image can have
  • data-image-large the image to replace the src with

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.