Simple Gallery Lightbox Plugin with jQuery and Bootstrap - Ekko Lightbox
File Size: | 115 KB |
---|---|
Views Total: | 78639 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Ekko Lightbox is a jQuery plugin which allows you to create a gallery lightbox using Bootstrap modal dialog component. Supports any html elements including images, galleries, iframes, Youtube videos, AJAX content and much more.
See also:
Installation:
# Yarn $ yarn add ekko-lightbox # NPM $ npm install ekko-lightbox --save
Basic usage:
1. Load jQuery ekko lightbox plugin's JavaScript and Stylesheet files into your Bootstrap project.
<link href="bootstrap.min.css" rel="stylesheet"> <link href="ekko-lightbox.css" rel="stylesheet"> ... <script src="jquery.js"></script> <script src="ekko-lightbox.js"></script> <script src="bootstrap.min.js"></script>
2. Create a simple gallery lightbox via Html5 data-
attributes.
<a href="large-1.jpg" data-toggle="lightbox" data-gallery="multiimages" data-title="Image caption 1"> <img src="thumb-1.jpg" class="img-responsive"> </a> <a href="large-2.jpg" data-toggle="lightbox" data-gallery="Image caption 2" data-title="People walking down stairs"> <img src="thumb-2.jpg" class="img-responsive"> </a> <a href="large-1.jpg" data-toggle="lightbox" data-gallery="multiimages" data-title="Image caption 3"> <img src="thumb-3.jpg" class="img-responsive"> </a> ...
3. You can also initialize the plugin via JavaScript.
$('#demo').ekkoLightbox(options);
4. Available options.
// If you can't/don't want to set the href property of an element // data-remote="http://www...." remote: '', // For grouping elements // data-gallery="galleryname" gallery: '', // Force the lightbox into image/YouTube mode. // image|youtube|vimeo // data-type="(image|youtube|vimeo)" type: null, // navigation arrows leftArrow: '<span>❮</span>', rightArrow: '<span>❯</span>', // gallery title title: '', // gallery footer footer: '', // max width/height maxWidth: 9999, maxHeight: 9999, // displays the left / right arrows or not showArrows: true, // if true, gallery loops infinitely wrapping: true, // Always show the close button, even if no title is present always_show_close: true, strings: { close: 'Close', fail: 'Failed to load image:', type: 'Could not detect remote target type. Force the type using data-type', }, // Message injected for loading loadingMessage: 'Loading...', // if in an iframe can specify top.document doc: document, // Callback functions onShow: function() {}, onShown: function() {}, onHide: function() {}, onHidden: function() {}, onNavigate: function() {}, onContentLoaded: function() {}
5. Events.
- onContentLoaded: Fired when content (image/video/remote page etc) has been fully loaded.
- onNavigate: Fired before navigating a gallery.
- onShow/onShown/onHide/onHidden: Inherited from the bootstrap modal.
Change log:
2018-08-09
- Bugfix
v5.3.0 (2017-10-15)
- Fix aspect ratio issues, add max-width/max-height options.
v5.2.0 (2017-06-24)
- js updae
v5.1.1 (2017-01-31)
- fix bs4 header position
v5.1.0 (2017-01-28)
- Updates for bs4 alpha 6
v5.0.0 (2016-09-27)
- add <video /> ability
v4.0.2 (2016-05-09)
- Update
This awesome jQuery plugin is developed by ashleydw. For more Advanced Usages, please check the demo page or visit the official website.