jsOnlyLightbox 0.5.5

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">