LightSpeedBox

Lightbox plugin for jQuery

Summer days Lucy Wilde from "Despicable Me 2" Children Game Concept Tiny Vacation

About

LightSpeedBox is a jQuery plugin for 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 design
  • Slideshow
  • Controls: next, previous image, close button, keyboard, swipe for touch screens, download button
  • Smooth transitions and animations using CSS3
  • Localization
  • Open source
  • Works in webkit browsers, FireFox, IE > 9 (in IE9 plugin is still usable, though layout isn't really that great).

Installation

Manual Installation

For manual installation just include these two files into your page.

lsb.min.js
lsb.css

Install using Bower

Use following commands:
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 somewhere e.g. in <head> tag.

<script>
  $(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>

This is some text, an article if you like. The article displays individual images like the one below.

A cat and a baloon

Or check this one as well. This image got no particular purpose other than display the feature.

Survivor

Lightbox for a Gallery

To let the lightbox walk through image gallery (or group) just add data attribute 'data-lsb-group' to <a> tag that holds an image. Images in one gallery should share the same attribute value.

You can use as many groups as you required on a single page.

<script>
  $(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 &quot2&quot" data-lsb-group="gallery1">
  <img src="img/img02_prev.jpg" alt="Image Title &quot3&quot">
</a>
<a href="img/img03_fullsize.jpg" class="lsb-preview" data-lsb-group="gallery1">
  <img src="img/img03_prev.jpg" alt="Image Title">
</a>

No image

That's what happens if full size image hasn't been found.

Settings

Plugin supports settings through a simple JavaScript object passed as a parameter.

Name
Default
Description
showImageTitle
true
Show image title (title uses alt attribute of an image).
showImageCount
true
Number of images in group and number of current image (doesn't show up when single image is displayed).
showDownloadButton
true
Show download full-size image button.
showPlayButton
true
Slideshow button (doesn't show up when single image is displayed).
slideShow
false
Slideshow enabled, when lightbox first time open.
slideShowTiming
3500
Slideshow delay (msec).
zIndex
30
z-index property of lightbox (bump it higher if it shows up beneath the other elements).
locale
{ nextButton: 'Next image',
prevButton: 'Previous image',
closeButton: 'Close',
downloadButton: 'Download image',
noImageFound: 'Sorry, no image found.',
downloadButton: 'Download image',
playButton: 'Enable autoplay'
pauseButton: 'Stop slideShow'
}
Localization settings in a JavaScript object.
// Example of using settings
<script>
  $(window).load(function() {
    $.fn.lightspeedBox({
      showDownloadButton: false,
      showPlayButton: false,
      showImageCount: false
    });
  });
</script>

License

The MIT public license © 2018 Alexander Emashev.