Full Featured Lightbox Alternative – yBox

Preview:

Description:

yBox is a lightweight yet feature-rich lightbox JavaScript library for images, videos, iframes, text, and any HTML content you provide.

Features:

• Allows multiple instances (lightbox in lightbox).
• Responsive and clean UI design.
• Allows to load content via AJAX requests.
• Galley mode that allows to navigate between grouped items.

How to use it:

1. Start by inserting the yBox’s JavaScript and CSS into the HTML document.

<link rel="stylesheet" href="dist/css/yBox.min.css" />
<script src="dist/js/yBox.min.js"></script>

2. Initialize the yBox library and we’re ready to go.

window.onload = function(){
  if(document.querySelector('.yBox')){
    var myYbox = new yBox();
     myYbox.init();
  };
}

3. Show a basic lightbox when needed (on page load for example.)

myYbox.yBox('Lightbox Content Here');

4. Load content from any element within the document.

<div style="display:none;">
  <div id="modalContent">
    Modal Content here
  </div>
</div>

<a class="yBox" href="#modalContent">Launch The Lightbox</a>

5. Open an iframe in the lightbox. Ideal for Youtube videos.

<a href="https://www.youtube.com/watch?v=eEMpCcLm6NI&list=RDeEMpCcLm6NI&start_radio=1" class="yBox yBox_iframe">
  Open The Youtube Video
</a>

6. Load content via AJAX.

<a href="https://www.google.com" class="yBox yBox_ajax">
  Launch The Lightbox
</a>

7. Apply an additional CSS class to the lightbox.

<a class="yBox" data-popup-class="customClass" href="#modalContent">Launch The Lightbox</a>

8. Create a gallery lightbox from a group of images.

<a href="1.jpg" class="yBox" data-ybox-group="group1">
  <img src="thumb-1.jpg" alt="Image Alt 1" width="200" />
</a>
<a href="2.jpg" class="yBox" data-ybox-group="group1">
  <img src="thumb-2.jpg" alt="Image Alt 2" width="200" />
</a>
<a href="3.jpg" class="yBox" data-ybox-group="group1">
  <img src="thumb-3.jpg" alt="Image Alt 3" width="200" />
</a>
...

9. Event handlers.

myYbox.onYboxOpen = function(){
  // Fired when yBox is opened
};
myYbox.onYboxClose = function(){
  // fired when yBox is closed
};
myYbox.onNextItemClick = function(){
  // fired when clicking next button
};
myYbox.onPrevItemClick = function(){
  // fired when clicking prev button
};