Full-featured Touch-enabled Lightbox Plugin - TopBox

TopBox is the upgraded version of the Nivo Lightbox plugin that provides a full-featured lightbox solution for modern web & mobile design.

Key features:

• Fully responsive and retina-ready.
• Supports touch swipe events.
• Supports Youtube & Vimeo videos.
• Supports iframe content.
• Supports more file formats: PDF, SVG, GIF, WebP image, etc...
• Auto exacts captions from title attribute.
• Keyboard navigation.
• Content loading indicator.
• 7 extra skins.
• 6 smooth transition effects.
• Gallery lightbox mode.
• And much more.

Basic usage:

1. Load the jQuery TopBox plugin along with the latest jQuery library.

<link rel="stylesheet" href="/path/to/topbox.css">
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/topbox.js"></script>

2. Load a skin CSS of your choice in the document.

<link rel="stylesheet" href="/skins/blue_hue/styles.css">
<link rel="stylesheet" href="/skins/galaxy/styles.css">
<link rel="stylesheet" href="/skins/impact/styles.css">
<link rel="stylesheet" href="/skins/intense_kiss/styles.css">
<link rel="stylesheet" href="/skins/monospace/styles.css">
<link rel="stylesheet" href="/skins/real_estate/styles.css">
<link rel="stylesheet" href="/skins/whiteout/styles.css">

3. Initialize the lightbox plugin and we're ready to go.

$(function(){
  $('.lightbox').topbox();
});

4. Add the CSS class lightbox to the media links. Done.

<a href="1.jpg" class="lightbox" title="Image Caption">Image</a>

<a href="1" data-lightbox-hidpi="[email protected]" class="lightbox" title="Retina Image">Retina Image</a>

<a href="1.mp3" class="lightbox" title="HTML5 Audio">HTML5 Audio</a>
<a href="1.mp4" class="lightbox" title="HTML5 Video">HTML5 Video</a>

<a href="1.html" class="lightbox" title="Iframe Contnet" data-lightbox-type="iframe">Iframe Contnet</a>

<a href="https://youtu.be/2xX7RrxyRac" class="lightbox" title="YouTube Video">YouTube Video</a>
<a href="https://vimeo.com/143418951" class="button lightbox" title="Vimeo Video">Vimeo Video</a>

<a href="#inline" class="lightbox" data-lightbox-type="inline" title="Inline Content">Inline HTML Content</a>

<div id="inline" style="display: none;">
  <h3>Inline Content</h3>
</div>

<a href="ajax.txt" class="lightbox" data-lightbox-type="ajax" title="AJAX Content">AJAX Content</a>

5. Available plugin options.

$('.lightbox').topbox({

  // fade, fadeScale, slideLeft, slideDown, slideUp or fall
  effect: 'fade',

  // blurs the background
  backgroundBlur: false,

  // skin name
  skin: 'darkroom',

  // enable keyboard navigation
  keyboardNav: true,

  // closes lightbox by clicking on image
  clickImgToClose: false,

  // closes lightbox by clicking on background overlay
  clickOverlayToClose: true,

  // close text
  closeToolTip: 'Close',

  // previous text
  previousToolTip: 'Previous',

  // next text
  nextToolTip: 'Next',

  // exacts caption text from title attribute
  titleSource: 'title',
  
  // loading message
  loadingMessage: 'Loading...',

  // PDF message
  pdfMessage: 'View the PDF in a new window:',

  // PDF button
  pdfButton: 'Tap Here',

  // error message
  errorMessage: 'The requested content cannot be loaded. Please try again later.'

});

6. Available callback functions.

$('.lightbox').topbox({

  onInit: function() {},
  beforeShowLightbox: function() {},
  afterShowLightbox: function(lightbox) {},
  beforeHideLightbox: function() {},
  afterHideLightbox: function() {},
  beforePrev: function(element) {},
  onPrev: function(element) {},
  beforeNext: function(element) {},
  onNext: function(element) {},

});

Changelog:

2021-03-02

• Improvements to the playback of YouTube on smartphones

2020-11-21

• Improved Youtube

2019-09-28

• Modify Pulse skin
• Removed HiDPI code

2019-09-27

• Cleanup
• Remove loading message

2019-09-26

• Updated theme

2019-09-20

• JS update

 

---

This awesome jQuery plugin is developed by willwood. For more Advanced Usages, please check the demo page or visit the official website.