How to trigger a jQuery Plugin (fancybox) if URL match

sarandi — Thu, 16 Jun 2011 21:42:05 +0000

I currently work for a venue – often times we have shows with multiple acts, so we need to list set times for each artist. Easy enough: I can write a modal-type pop-up window using fancybox that opens when the user clicks a link (“DJ Showtimes here“, for example). But say you want to send an email that links to that list? Since most email clients, web- or desktop-based, don’t allow javascript, I needed to trigger the click based on the URL. Here’s my solution (using a custom jQuery function to avoid conflicts with other libraries in use):


$j('#various2').fancybox({'hideOnContentClick': true, 'hideOnOverlayClick': true, 'showCloseButton': true, 'scrolling': 'auto'}); /* use id of link for fancybox selector */

/* necessary to set if-statement within page ready or load event */

$j(document).ready(function() {
if(document.location.href.indexOf('#various2')>-1){ /* check for anchor text in URL */
$j('#various2').fancybox().trigger('click'); /* chain click trigger on to previously written fancybox declaration */
}});
$j('#fancybox-wrap').css({'margin':'20px auto'}) /* set css for wrapper; safari was centering the inline element to the position of the #various2 element, which was at the top of the page. This resets to 20px top/bottom and in the middle horizontally */

My link looks like this:

DJ Set Times Here

and my content is wrapped with:


CONTENT HERE

Easy, peasy.

wax ideal » programming

How to trigger a jQuery Plugin (fancybox) if URL match