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: https://stackoverflow.com/questions/14458123/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.
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();