https://github.com/tsega/meteor-bootstrap3-lightbox

Bootstrap 3 Lightbox from @ashleydw, https://github.com/ashleydw/lightbox, packaged for Meteor.js
https://github.com/tsega/meteor-bootstrap3-lightbox

Last synced: about 1 month ago
JSON representation

Bootstrap 3 Lightbox from @ashleydw, https://github.com/ashleydw/lightbox, packaged for Meteor.js

• Host: GitHub
• URL: https://github.com/tsega/meteor-bootstrap3-lightbox
• Owner: tsega
• Created: 2014-06-23T06:00:52.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2014-08-31T19:32:44.000Z (over 10 years ago)
• Last Synced: 2023-08-09T23:28:19.783Z (over 1 year ago)
• Language: JavaScript
• Homepage:
• Size: 184 KB
• Stars: 1
• Watchers: 2
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# bootstrap3-lightbox

Bootstrap 3 Lightbox from [ashleydw](https://github.com/ashleydw/lightbox) packaged for Meteor.js

## To install

```sh

$ 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.

```html

.

.

.



  



.

.

.

```

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](https://github.com/meteor/meteor/wiki/Using-Blaze#rendered-callback-only-fires-once), 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.

```javascript

$(document).ready(function ($) {

    // delegate calls to data-toggle="lightbox"

    $(document).delegate('*[data-toggle="lightbox"]', 'click', function(event) {

        event.preventDefault();

        return $(this).ekkoLightbox();

    });

});

```

## Usage via JavaScript

```html

.

.

.



  



.

.

.

```

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

```js

$(document).ready(function ($) {

    // delegate calls to data-toggle="lightbox"

    $(document).delegate('#my-lightbox', 'click', function(event) {

        event.preventDefault();

        return $(this).ekkoLightbox();

    });

});

```

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](http://ashleydw.github.io/lightbox/).