The package stops working when you add iron-router package into project.

[milanzigmond]

It no longer opens popup but rather opens the image as file in the browser.

Tested on Meteor 0.9.0 with iron-router 0.8.2 and also with new iron-router 0.9.1

[matteodem]

Does it work without iron-router?

[milanzigmond]

yes, works fine UNTIL I add iron-router

using meteor 0.9.0 + iron-router 0.9.1 (latest)

1.create meteor project

2. add fancybox + some html code with image and js to fancybox it to see example - all is working fine
3. add iron-router - images opens to a new window instead of in a fancybox

milan

On Sun, Aug 31, 2014 at 7:49 PM, Matteo De Micheli <notifications@github.com

wrote:

Does it work without iron-router?

— Reply to this email directly or view it on GitHub https://github.com/matteodem/meteor-fancybox/issues/6#issuecomment-53995517 .

[mutil]

I 'm facing the same problem. Fancybox appears for a moment, then image opens to a new page.

[reustle]

I dug around in iron-router but couldn't find any way to "cancel" a route, nor did I find a way to get fancybox to load the image path from something other than the href of an a tag (like a data attribute).

So, I decided to just open fancybox myself. Here is a simplified example.

{{#each images }}
    <a href='/images/{{ . }}' class='product-image'><img src='/images/{{ . }}'/></a>
{{/each}}

Template.productDetails.helpers({
    'click .product-image' : function(e){
        e.preventDefault(); // Don't let iron-router run

        var images = Products.findOne({
            url : Router.current().params.product
        })['images'];

        $.fancybox.open( _.map(images, function(image){
            return { href : image }
        });

    }
});

The open method of fancybox is not really documented, but you can see a standalone example here http://jsfiddle.net/wg4MD/

As you'll notice with my example, regardless of which image you click, it will always start the gallery with the first in the array. I fixed this by pulling down the images array from the product, then splitting the list on the index of the clicked image, then moving all previous images to the end of the list. Then I'd call fancybox and it would start with the clicked image.

Happy to give more detail if anyone needs it.

[reustle]

Alright, I came up with a much cleaner solution. Let me know if it gives you any trouble.

{{#each images }}
    <a href='/images/{{ . }}' rel='productImages'>
        <img src='/images/{{ . }}'/>
    </a>
{{/each}}

Template.productDetails.events({
    'click a[rel=productImages]' : function(e){
        e.preventDefault();
    }
});

Template.productDetails.rendered = function(){
    $('a[rel=productImages]').fancybox();
}

[jhmacdon]

@reustle Yup, this is the fix I have been searching for! Thank you!!

[reustle]

Glad it worked. I should note that you may want to use the newly introduced .onRendered(function(){ ... } method instead of the .rendered = function(){ ... } method that is in my example.

[jhmacdon]

Curious though, do you think it worked only because of the e.preventDefault()? I will play with it later but for now I am just relieved to have it working.

[RenMan]

Thanks for this workaround - I was running into the same issue and realized that iron router was messing with fancybox.