prevent default browser action but allow library code in meteor

Question

I converted my brewery's website to use meteor. In the conversion process I have run into a bug in the integration of some library code. The original site uses lightbox2 http://lokeshdhakar.com/projects/lightbox2/ to pop up a modal of a graphic we designed.

In the meteor version the modal looks like its about to load but then instead just navigates directly to the image asset the modal is supposed to display. Click 'View the Brew Diagram' at http://twbrewing.meteor.com/beers to see the problem in action.

To me it looks like the library code is working but for some reason does not prevent the default browser action. I tried using a preventDefault() on the click event for that, but then nothing happens at all. Ideas?

Answer 1

Wrap the HTML in {{#constant}}...{{/constant}} and run any lightbox code in a template render function, e.g.

Template.pictures.rendered = function() {
   lightBoxInit();
}

I don't actually know what the lightbox function is called... it's either something that they will tell you in the docs to run on pageload, or that is wrapped in a $(document).ready() call in the source. Even better is if there's an API call to run on the elements directly (something like $('img').lightbox() or $('img').each(function(el) { lightbox(el) }).

Sorry I'm not so familiar with lightbox but this is the strategy you need and what you need to look for :)

Note that the rendered function is called on rerendering too. This is fine for most libraries but if you notice any strange behaviour you'll need to add some logic to ensure that the relevant links are not processed twice (either by using a .data boolean or by destroying and recreating the wrapper).