Mostly everything, including IE7 and above!
Lightbox: Simply add a rel="lightbox" or data-lightbox="lightbox" to any link that has a href with an image link. Any alt attribute attached in a nested image/thumbnail will show as a caption in the lightbox. By default, an automatic gallery will be created with next/previous controls between all the lightbox rel/attributes found. Example:
<a href="test.jpg" rel="lightbox"> <img src="test-thumbnail.jpg" alt="Test Picture" /> </a>
Alternatively, you can load images into a lightbox without having to define a link's "href" attribute by setting it to "#". It will then use the image's "src" attribute. This is useful if you aren't using separate thumbnail images. Example:
<a href="#" rel="lightbox"> <img src="test.jpg" alt="Test Picture" /> </a>
Gallery: You can load multiple images without having defined anchors/thumbnails. Simply add a data-lightbox="gallery", assign a unique id, and include data-gallery in the form of "url,caption;url,caption". Example:
<a href="#" data-lightbox="gallery" id="test-gallery" data-gallery="test.jpg,Test Picture;test2.jpg,Test Picture #2">Gallery</a>
Content: Load HTML-based content in the lightbox using data-lightbox="content" and adjacent HTML element with the "lightlightbox-content" class. Example:
<a href="#" data-lightbox="content">Test</a> <div style="display: none;" class="lightlightbox-content"> <h1>Test</h1> <p>Test</p> </div>
Alternatively, you can specify a width and height to force the content to that size and disable the dynamic resizing capabilities by attaching a data-width and data-height attribute to the "lightlightbox-content" container. Example:
<div style="display: none;" class="lightlightbox-content" data-width="250" data-height="250"></div>
Version: 1.3.3 (January 4th, 2019)
- Forced the position of the lightbox container to counter some common site styles that add relative positioning to all elements.
Version: 1.3.2 (November 16th, 2018)
- Fixed a typo leading to no captions being set for normal lightbox usage.
- Fixed incorrect indexing for click events, leading to incorrect automatic image gallery ordering.
Version: 1.3.1 (August 22nd, 2018)
- Added support for using
href="#"to use the image's
srcattribute to open into a lightbox.
- Fixed an issue where controls could get too close to the edge.
- Reduced minified script size.
Version: 1.3 (August 9th, 2018)
- lightLightBox no longer requires jQuery.
- Improved content resizing by calculating the content's width and height more accurately.
- Animations now use CSS, removing them for all browsers without support for transitions.
- Fixed some issues where inconsistent effects/events would fire if rapidly loading a lightbox.
- Buttons and loading dots are no longer selectable/highlightable.
- Removed scrollbars/scrolling when a lightbox is opened (for better device compatibility for width calculations).
- Improved performance heavily.
Version: 1.2 (April 22nd, 2015)
- Attributes and rel selectors now use validated HTML/output. You will need to update all your HTML when moving to this version if you used gallery/content selectors previously.
- A content lightbox will now properly re-position itself if using a set width/height.
- Fixed a bug where an image would still load if you clicked on overlay (close) during a load.
lightLightBox.js is licensed under the MIT License.