Why do all lightboxes out there use a gazillion images and options when all I want is to show a larger image when I click a small one?
- This lightbox builds on Bootstrap using the Bootstrap modal styles.
- Keyboard close with escape button or "x" key
- Easy to add, just add a data attribute
data-lightbox to a linked image.
Click an image:
This code is yet untested in anything but Chrome for Mac.
- Bootstrap CSS and more specifically the modal and utility styles (for the
- Bootstrap JS and more specifically the transition (optional) script
jquery.simple.lightbox.css includes CSS to make the modal look nice, but this CSS is not required. You can ignore the file and roll your own
jquery.simple.lightbox.js: the script itself
- Link a small image to a big image:
<a href="image_big.jpg"><img src="image_small.jpg" alt="" /></a>
- Add a data attribute
data-lightbox to the <a>
- Optional: Add alt text to the
<img> for the caption
- Initialize the plugin:
// Invoke our plugin
- Add bootstrap transitions
- If an image does not get loaded, provide fallback/loading state
- To test/Check: embed, object or selects in the background in IE
©2013, Wolf's Little Store - Free to use under the MIT license.