Simple Gallery Lightbox Plugin with jQuery and Bootstrap - Ekko Lightbox

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:

• Bootstrap Lightbox Plugin with jQuery

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>&#10094;</span>',
rightArrow: '<span>&#10095;</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.