Launch Fancybox From jQuery

Hmmm… in theory yes, but not easy. And you might need to get a modified FancyBox script so there’s probably no point in using the Easy FancyBox plugin. It will probaly be easier if you build FancyBox straight into your theme yourself.

In any case, you’d have to:
1. make FancyBox bind to each dropdown select option and look for the value attribute instead of href (or give each option a href attribute if you don’t care about HTML validation too much)
2. make a select option change to trigger a click on that tag (not a form submit because that will refresh the page and break any fancybox action again)

Take the first example of how to open another web page when selecting a dropdown option on https://blogs.msdn.com/b/lisawoll/archive/2004/08/19/217427.aspx as a starting point and then modify function goToPage() to launch fancybox with the proper image URL.

But like I said, not much point (actually complicates things) in using my plugin for this use case…

Thanks for your assistance. I followed your guidance to build the library into the template rather than using the plugin, then used the select element’s change() event handler to trigger the click event on the link (which was hidden).

In case anyone had the same question…

jQuery(document).ready(function(){
        //initialize fancybox
	jQuery(".fancybox").fancybox();	

        //trigger click event of FancyBox hyperlink (hidden in my case) when SELECT element value changes
	jQuery(".open_contact_pop select").change(function(){
		if(jQuery(this).val() != "No"){
			jQuery("#contact_form_popup_link").trigger('click');
		}
	});
});