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

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.

5 thoughts on “How to trigger a jQuery Plugin (fancybox) if URL match

  1. Hi there,
    Thanks for posting this solution. Would you be able to post or send over a demo file (js and html), I cannot seem to get this solution to work.
    Thanks,
    Kyle

  2. Nevermind! Got it working, accidentally had the id of various2 on href.

    Thanks so much, this saved me a lot of trouble!!!

    Kyle

  3. One more question, when going to the fancybox link, the foancybox loads in the middle to bottom of the page, is there a way to stop this and just display it at the top of the page?

    I left out the line:
    $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 */

    Thanks,
    Kyle

  4. Kyle,

    I’m pretty sure you can override using either linked stylesheets or injecting css through jQuery – you can find the block element you want to target using Firebug. From there you can set whatever positioning you’d like (top, left, margin, position, etc.)

Leave a Reply