Slenderbox is a lightweight and framework-free lightbox script. Coming in at just 2kB minified and gzipped, it is considerably smaller than even the loading icon used by most similar scripts. In addition, by using the HTML5 data attribute, it can be used in valid HTML5.
- Upload
build/slenderbox.jsandbuild/slenderbox.cssto a web server. - Include the JavaScript file:
<script type="text/javascript" src="slenderbox.js"></script>, using the correct path toslenderbox.js. - Include the CSS file:
<link type="text/css" rel="stylesheet" href="slenderbox.css"/>, using the correct path toslenderbox.css. - Add
data-sboxto image links where a lightbox is desired. - Add
data-sbox="REFERENCE"with a common REFERENCE to sets of links where a lightbox gallery is desired. - A link's
titlebecomes a caption in the lightbox.
An example is included in the examples directory.
Since Slenderbox is built with HTML5, CSS3, and SVG, it requires a modern browser to function.
- Firefox 16+
- Chrome 5+
- Safari 4.1+
- Opera 12.5+
- Internet Explorer 10+
- Firefox 3.5+
- Chrome 4+
- Opera 10.5+
- Internet Explorer 9+
Slenderbox is distributed under the MIT License. For more information, read the file COPYING or peruse the license online.
The images provided with the examples are licensed under the Creative Commons Attribution-ShareAlike 3.0 Unported License.
- Matthew Petroff, Original Author