LightSpeedBox

Lightbox plugin for jQuery

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

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.

lsb.min.js
lsb.css

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.

<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 that should display 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 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.

<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>
Lang from "Yie Ar Kung Fu" Cobald Blades cursor pack Document Flow System Software Splash Screens Zhenya from "Everlasting Summer" Zootopia fan-art Little Red Riding Hood Everything's fine Lucy Wilde

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

<script>
  $(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>
A Girly Character concept

No image

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

A Girly Character concept

Settings

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

Name
Default
Description
showImageTitle
true
Show image title (from alt attribute).
showImageCount
true
Number of images in group and number of current image (doesn't show up when single image displayed).
showDownloadButton
true
Show download full-size image button.
showAutoPlayButton
true
Slideshow button (doesn't show up when single image displayed).
autoPlayback
false
Slideshow enabled, when lightbox first time open.
playbackTiming
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',
autoplayButton: 'Enable autoplay'
}
Localization settings in JavaScript object (see below)
// Example of using settings
<script>
  $(window).load(function() {
    $.fn.lightspeedBox({
      showDownloadButton: false,
      showAutoPlayButton: false,
      showImageCount: false
    });
  });
</script>

License

The MIT public license © 2016 Alexander Emashev.