# jsOnlyLightbox 0.5.6

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

- No jQuery needed
- Fully responsive
- Customizable
- CSS3-Animations & controls, however, loading GIFs and arrow images can be used
- Lightweight (<10Kb)
- Licensed under MIT, code is free for commercial & personal use. However, it would be great if you send me an link of your websites using my lightbox so I can see it live in action and post some real-word examples here. I am also happy about backlinks & github-stars :) The pictures included are NOT free to use! Please contact me first if you want to use the them!
- IE8+ supported. Dont`t forget to add those lines inside your `<head></head>` - tag if you need IE8-Support:
`<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js" type="text/javascript"></script>
<![endif]-->`
- Visit me on felixhagspiel.de

## 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 or elements 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