bootstrap3-lightbox

Bootstrap 3 Lightbox from ashleydw packaged for Meteor.js

To install

$ mrt add bootstrap3-lightbox

Usage via data attributes

Set up your markup as in the example below. I use it primarily for images so the example reflects that.

1<template name="temName">
2.
3.
4.
5<a href="path-to-large-image" data-toggle="lightbox">
6  <img src="path-to-thumbnail" alt="alt-text" class="img-responsive" />
7</a>
8.
9.
10.
11</template>

Then delegate calls to data-toggle="lightbox". I'm suprised that this needed. Normally, I would put this code in the rendered template helper method but because of the way the new Blaze templating engine works, this method will not be called everytime. However, adding a normal client side script does the job. So create a new JavaScript file, e.g. client/js/client.js and add the following.

1$(document).ready(function ($) {
2    // delegate calls to data-toggle="lightbox"
3    $(document).delegate('*[data-toggle="lightbox"]', 'click', function(event) {
4        event.preventDefault();
5        return $(this).ekkoLightbox();
6    });
7});

Usage via JavaScript

1<template name="temName">
2.
3.
4.
5<a href="path-to-large-image" id="my-lightbox">
6  <img src="path-to-thumbnail" alt="alt-text" class="img-responsive" />
7</a>
8.
9.
10.
11</template>

Create a new JavaScript file, e.g. client/js/client.js and add the following.

1$(document).ready(function ($) {
2    // delegate calls to data-toggle="lightbox"
3    $(document).delegate('#my-lightbox', 'click', function(event) {
4        event.preventDefault();
5        return $(this).ekkoLightbox();
6    });
7});

The only difference between the two approaches above is the selector that's being used to delegate the click event. For more details please visit the original author's GitHub page.