A Lightbox plugin written in TypeScript.

Demo

Using npm:

  $ npm install panda-box --save

or yarn:

  $ yarn add panda-box

Then import it in your javascript files:

import PandaBox from 'panda-box';

Also make sure that you include styles:

import 'panda-box/dist/pandaBox.css';

Add attribute data-pandabox to container of gallery and call new PandaBox();

Or pass your own selector to class constructor:

  new PandaBox('.galleryContainer')

A gallery must be in a form of <img src="#"> with a <a href="#"> wrap eg.:

  <div data-pandabox>
    <a href="1.jpg">
      <img src="1-thumb.jpg" />
    </a>
    <a href="2.jpg">
      <img src="2-thumb.jpg" />
    </a>  
  </div>

Add data-title attribute with string inside it to attach title to image.

Add data-description attribute with string inside it to attach description to image.

IE 11+, all evergreeen browsers