panda-box
v1.0.3
Published
A lightbox plugin written in Typescript
Downloads
15
Readme
Panda Box
A Lightbox plugin written in TypeScript.
1. Installation
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';
2. Usage
Add attribute data-pandabox
to container of gallery and call new PandaBox();
Or pass your own selector to class constructor:
new PandaBox('.galleryContainer')
2.1 HTML Structure
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>
3. Additional options
3.1. data-title=""
Add data-title attribute with string inside it to attach title to image.
3.2. data-description=""
Add data-description attribute with string inside it to attach description to image.
4. Support
IE 11+, all evergreeen browsers