This time I will share jQuery Plugin and tutorial about Full-featured Touch-enabled Lightbox Plugin – TopBox, hope it will help you in programming stack.
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.
1 |
<link rel="stylesheet" href="/path/to/topbox.css"> |
2 |
<script src="/path/to/cdn/jquery.min.js"></script> |
3 |
<script src="/path/to/topbox.js"></script> |
2. Load a skin CSS of your choice in the document.
1 |
<link rel="stylesheet" href="/skins/blue_hue/styles.css"> |
2 |
<link rel="stylesheet" href="/skins/galaxy/styles.css"> |
3 |
<link rel="stylesheet" href="/skins/impact/styles.css"> |
4 |
<link rel="stylesheet" href="/skins/intense_kiss/styles.css"> |
5 |
<link rel="stylesheet" href="/skins/monospace/styles.css"> |
6 |
<link rel="stylesheet" href="/skins/real_estate/styles.css"> |
7 |
<link rel="stylesheet" href="/skins/whiteout/styles.css"> |
3. Initialize the lightbox plugin and we’re ready to go.
2 |
$('.lightbox').topbox(); |
4. Add the CSS class lightbox to the media links. Done.
01 |
<a href="1.jpg" class="lightbox" title="Image Caption">Image</a> |
03 |
<a href="1" data-lightbox-hidpi="1@2x.jpg" class="lightbox" title="Retina Image">Retina Image</a> |
05 |
<a href="1.mp3" class="lightbox" title="HTML5 Audio">HTML5 Audio</a> |
06 |
<a href="1.mp4" class="lightbox" title="HTML5 Video">HTML5 Video</a> |
08 |
<a href="1.html" class="lightbox" title="Iframe Contnet" data-lightbox-type="iframe">Iframe Contnet</a> |
13 |
<a href="#inline" class="lightbox" data-lightbox-type="inline" title="Inline Content">Inline HTML Content</a> |
15 |
<div id="inline" style="display: none;"> |
16 |
<h3>Inline Content</h3> |
19 |
<a href="ajax.txt" class="lightbox" data-lightbox-type="ajax" title="AJAX Content">AJAX Content</a> |
5. Available plugin options.
01 |
$('.lightbox').topbox({ |
07 |
backgroundBlur: false, |
16 |
clickImgToClose: false, |
19 |
clickOverlayToClose: true, |
22 |
closeToolTip: 'Close', |
25 |
previousToolTip: 'Previous', |
34 |
loadingMessage: 'Loading...', |
37 |
pdfMessage: 'View the PDF in a new window:', |
40 |
pdfButton: 'Tap Here', |
43 |
errorMessage: 'The requested content cannot be loaded. Please try again later.' |
6. Available callback functions.
01 |
$('.lightbox').topbox({ |
03 |
onInit: function() {}, |
04 |
beforeShowLightbox: function() {}, |
05 |
afterShowLightbox: function(lightbox) {}, |
06 |
beforeHideLightbox: function() {}, |
07 |
afterHideLightbox: function() {}, |
08 |
beforePrev: function(element) {}, |
09 |
onPrev: function(element) {}, |
