Fork me on GitHub

jsOnlyLightbox 0.5.3

Developing tools like this lightbox takes a lot of time. If you like my lightbox and want to support me, buy me a beer via paypal :) Thanks!

Responsive Lightbox written in plain JavaScript

Full API documentation

Full API documentation including methods, options & callbacks is on Github

Download

Get the latest version of the jsOnlyLightbox from Github. You can also use bower (bower.io) to install:

bower install jsonlylightbox --save-dev

Usage

Add the link to the CSS-File to the head of your html-file:

<link rel="stylesheet" href="css/lightbox.css">

Add this before the closing body tag:

<script src="jslightbox.js" type="text/javascript"></script>
<script>
var lightbox = new Lightbox();
lightbox.load();
</script>

A complete init of the lightbox with all options looks like this (click here for full API & options):

var lightbox = new Lightbox();

var lightBoxOptions = {
 // options
 boxId: false,
 dimensions: true,
 captions: true,
 prevImg: false,
 nextImg: false,
 hideCloseBtn: false,
 closeOnClick: true,
 loadingAnimation: 200,
 animElCount: 4,
 preload: true,
 carousel: true,
 animation: 400,
 nextOnClick: true,
 responsive: true,
 maxImgSize: 0.8,
 keyControl: true,
 // callbacks
 onopen: function(){
  // ...
 },
 onclose: function(){
  // ...
 },
 onload: function(event){
  // ...
 },
 onresize: function(){
  // ...
 }
 onloaderror: function(event){
  // ...
 }
}

lightbox.load(lightBoxOptions);

Then you just have to add the attribute data-jslghtbx to all the images you want to show in the lightbox:

<img class="jslghtbx-thmb" src="img/lightbox/1.jpg" alt="" data-jslghtbx>

Note: The CSS-class jslghtbx-thmb is optional. You can use your own styling if you want.

Load a different image on click

You can pass a link of a different image via the data-jslghtbx attribute, which then will be loaded on click. Use this if you want to use small sized pictures for the thumbnails to reduce traffic:

<img class="jslghtbx-thmb" src="img/lightbox/1.jpg" alt="" data-jslghtbx="img/1-big.jpg">

Use captions

If you want to use captions add the data-jslghtbx-caption attribute. You can also pass HTML:

<img class="jslghtbx-thmb" src="img/lightbox/1.jpg" data-jslghtbx-caption="This is my <a href='http://yourURL.com'>caption text</a>." alt="" data-jslghtbx>

Use groups to show multiple images

If you want to group images to structure your content, use the data-jslghtbx-group attribute. You can have multiple groups on one page:

<img class="jslghtbx-thmb" src="img/lightbox/3-small.jpg" alt="" data-jslghtbx="img/3-big.jpg" data-jslghtbx-group="mygroup1">
<img class="jslghtbx-thmb" src="img/lightbox/4-small.jpg" alt="" data-jslghtbx="img/4-big.jpg" data-jslghtbx-group="mygroup1">
<img class="jslghtbx-thmb" src="img/lightbox/6-small.jpg" alt="" data-jslghtbx="img/6-big.jpg" data-jslghtbx-group="mygroup1">
<img class="jslghtbx-thmb" src="img/lightbox/7-small.jpg" alt="" data-jslghtbx="img/7-big.jpg" data-jslghtbx-group="mygroup1">


<img class="jslghtbx-thmb" src="img/lightbox/8-small.jpg" alt="" data-jslghtbx="img/1-big.jpg" data-jslghtbx-group="mygroup2">
<img class="jslghtbx-thmb" src="img/lightbox/9-small.jpg" alt="" data-jslghtbx="img/1-big.jpg" data-jslghtbx-group="mygroup2">
<img class="jslghtbx-thmb" src="img/lightbox/10-small.jpg" alt="" data-jslghtbx="img/1-big.jpg" data-jslghtbx-group="mygroup2">

Group 1

Group 2

To download and see the full documentation of options & API please visit my Github-Profile

Copyright © 2014 Felix Hagspiel www.felixhagspiel.de