Fancybox doesn't trigger on $(elem).click(), b

Question

I'm having trouble getting fancybox to trigger. I have it set up to trigger when you click an element. I still don't know why, but for some reason fancybox only works if i bind it using live(), sort of like this:

$(document).ready(function() {
    // This works
    $('.fancybox').live('mousedown', function() {
        $(this).fancybox();
    });

    // This doesn't
    $('.fancybox').fancybox();
});

Read more about that here: Fancybox is loaded, but nothing happens, and no errors?

The problem is, it only works if i actually click the element. If i try to trigger a click using:

$('.fancybox').trigger('mousedown');

i get nothing! It just doesn't work.

The reason i need to do this is because the images are being printed out with PHP in a gallery (with thumbnails etc). I only want a dropdown of the available galleries, so on page load, i hide all of the thumbnails and then loop through them and create a dropdown menu containing all the galleries. So far so good! If i show the element using the inspector (using chrome) and then manually click on it, it works fine! Although, the problem is, when i try to trigger the click using the dropdown, nothing happens!

I have it set up so that every <option> in the dropdown has a data attribute of the gallery/thumbnail ID, and when the dropdown changes (when you select an option), it automatically finds the correct image, and triggers a click - which in turn should open a fancybox. I know it finds the correct image, and clicks it, it's just that nothing happens when it's clicked.

Try it!

URL: http://goo.gl/r4Klf

Rightclick on the first dropdown menu in the content, and inspect it. Above it, you'll see a bunch of .ngg-galleryoverview elements. Click on one of them and remove all the styling applied to the element (in element.style, the style basically hides the element). Then expand the element, and in there you'll see a .ngg-gallery-thumbnail. Remove display: none from the styling. You should now be able to see the element on the page. If you try clicking it, the fancybox will open. However, if you try to click it using $(the element).trigger('mousedown'), it's not going to work. Try targeting it using the href attribute, something like:

jQuery('a[href="http://hallarna.se/wp-content/gallery/2013/spoksonatenloggaliten.jpg"]').trigger('mousedown');

Please do note that jQuery is in noConflict mode meaning you will have to use jQuery() instead of $().

I've been battling this for several days now. Any ideas are super appreciated!

Answer 1

I think I see where the problem is. When you trigger mousedown, it just fires the plugin to work with the specified element when you click it; it's not actually supposed to show anything... until you click it or you trigger the click.

Try something like

jQuery('a[href="http://hallarna.se/wp-content/gallery/2013/spoksonatenloggaliten.jpg"]').trigger('mousedown').trigger('click');

Although I would look for a solution to make fancybox work as intended, with $('.fancybox').fancybox();