1

The lightbox used to work. However, when I tried it on meteor, it is not working any more.

I first add jquery dependency and put jquery.lightbox.js and jquery.lightbox.css to client folder.

$ meteor add jquery
$ ls -l client/js/jquery.lightbox.js
$ ls -l client/css/jquery.lightbox.css

This is the test template and script to use lightbox.

->test.html

<template name="test">
<a href="xxxxxxxx" class="screenshot">
    <img src="xxxxxx" alt="Screenshot" class="thumbnail"/>
    <span class="screenshot-zoom"></span>
</a>
</template>

->screenshot.js

$(function () {
     $(".screenshot").lightbox();
});

If I use it as regular html, it worked. But it is not under meteor. Do I miss anything?

angelokh
  • 9,426
  • 9
  • 69
  • 139
  • If the template is not loaded when you invoke the jQuery function in the `screenshot.js`, jQuery will not see the the elements in the template. I'd advise to invoke the function when the template is loaded. – nsmeta Aug 17 '12 at 12:33
  • I am new to meteor. Could you give me an example how to achieve that? Thanks. – angelokh Aug 17 '12 at 17:35
  • As far as I am aware, there is currently no `onload` event for the templates. So you can either rewrite you application logic, or use a hacky solution described here: http://stackoverflow.com/questions/11167390/template-onload-event-for-meteor-js. Hope it helps. – nsmeta Aug 18 '12 at 11:20
  • Thanks. I tried. It is still not working with lightbox. There probably are some bugs from lightbox itself with Meteor. – angelokh Aug 19 '12 at 18:54

2 Answers2

4

Starting from Meteor 0.4.0 you can use the Template.myTemplate.rendered method to do this:

In your case that would be

Template.test.rendered = function() {
    if(!this._rendered) {
      this._rendered = true;
      $(this.find(".screenshot")).lightbox();
    }
}
Joscha
  • 4,643
  • 1
  • 27
  • 34
0

This is what I got from Meteor's dev, however, I did not verify it on new meteor 0.4.0.

http://docs.meteor.com/#meteor_startup

Meteor.startup(function () (
  $(".screenshot").lightbox();
});
angelokh
  • 9,426
  • 9
  • 69
  • 139