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
  • Slideshow
  • Controls: next, previous image, close button, keyboard, swipe for touch screens
  • Smooth transitions and animations using CSS
  • 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. This article displays individual images like the one below.

A cat and a baloon

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

Survivor

Lightbox for a Gallery

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

You can use as many groups as you need on a single page as well as mixing them with a single image.

<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 © 2016 Alexander Emashev.