About
LightSpeedBox is a jQuery plugin that represents a fancy image preview box (also called a lightbox).
Project's Github page.
Key features:
- Click thumbnail to show the lightbox
- Individual image preview as well as gallery
- Responsive
- Slideshow (auto playback)
- Controls: next, previous image, close button, keyboard, swipe for touch screens
- Smooth transitions and animations
- Localization
- Open source
- Works in webkit browsers, FireFox, IE > 9 (in IE9 plugin is still usable, though layout is not really that great).
Installation
Manual Installation
For manual installation just include these two files into your page.
Install using Bower
Use following command: bower install lightspeedbox or bower install lightspeedbox --save to save to your project as dependency.
Individual image preview
To preview a single image with LSB lightbox, use class '.lsb-preview' on <a> tag of an image. And don't forget to activate a plugin in JavaScript code.
$(window).load(function() {
$.fn.lightspeedBox();
});
</script>
<a href="img/img01_fullsize.jpg" class="lsb-preview">
<img src="img/img01_prev.jpg" alt="Image Title">
</a>
Lightbox for Gallery
To let lightbox go through image gallery (or group) just add data attribute 'data-lsb-group' with appropriate value to each preview in group.
You can use as many groups as you need on a single page as well as mixing them with a single image.
$(window).load(function() {
$.fn.lightspeedBox();
});
</script>
<a href="img/img01_fullsize.jpg" class="lsb-preview" data-lsb-group="gallery1">
<img src="img/img01_prev.jpg" alt="Image Title">
</a>
<a href="img/img02_fullsize.jpg" class="lsb-preview "2"" data-lsb-group="gallery1">
<img src="img/img02_prev.jpg" alt="Image Title "3"">
</a>
<a href="img/img03_fullsize.jpg" class="lsb-preview" data-lsb-group="gallery1">
<img src="img/img03_prev.jpg" alt="Image Title">
</a>
Alternative download URL
Can be handy, when you need to display preview version and let user to get full-size image. Use data attribute data-lsb-download-link
$(window).load(function() {
$.fn.lightspeedBox();
});
</script>
<a
href="img/mannequin.jpg"
class="lsb-preview"
data-lsb-group="gallery1"
data-lsb-download-link="img/mannequin_full.jpg"
>
<img src="img/mannequin_prev.jpg" alt="Image Title">
</a>
No image
That's what happens if full size image hasn't found.
Settings
Plugin supports settings through a simple JavaScript object passed as a parameter.
prevButton: 'Previous image',
closeButton: 'Close',
downloadButton: 'Download image',
noImageFound: 'Sorry, no image found.',
downloadButton: 'Download image',
autoplayButton: 'Enable autoplay'
}
<script>
$(window).load(function() {
$.fn.lightspeedBox({
showDownloadButton: false,
showAutoPlayButton: false,
showImageCount: false
});
});
</script>
License
The MIT public license © 2016 Alexander Emashev.