Easy Any Content Lightbox & Gallery – PlayBox.js

Preview:

Description:

PlayBox.js is an easy-to-use, full-featured lightbox plugin for displaying HTML content or image galleries in a fullscreen popup.

How to use it:

1. Install the library by simply adding the PlayBox.js script to the page.

<script src="playbox.js"></script>

2. Create a trigger button to toggle the lightbox.

<button class="trigger">Open Lightbox</button>

3. Create a playbox to showcase any content in a lightbox popup. Possible parameters:

• boxButton: Trigger button
• boxTarget: Target content
• enter: Animation speed (Enter)
• exit: Animation speed (Exit)

<div class="playbox example">
  <div class="container">
    Any Content Here
  </div>
</div>

PlayBox.open('.trigger', '.example', 200, 200)

4. Create a gallery lightbox with navigation arrows and thumbnails. Possible parameters:

• boxButton: Trigger button
• boxTarget: Target content
• imageList: An array of images
• enter: Animation speed (Enter)
• exit: Animation speed (Exit)

<div class="playboximage example"></div>

PlayBox.imageOpen('.trigger', '.example', 
  [ 
    '1.jpg',
    '2.jpg',
    '2.jpg',
    // ...
  ], 200, 200);