FancyBox: Dynamically Change iframe URL before Lightbox Load CodeUnit 09 JUN 2010

The excellent and rather flexible jQuery plugin FancyBox has become my defacto jQuery lightbox implementation and as such it has found its way into most of my project work.

One of the cool little tricks I stumbled across was the ability to dynamically alter the URL of an iframe loading fancybox implementation and thought it a good idea to share over here.

In my example I have a number of rows, all with a distinct record id and all which need an edit functionality.

Now what I do is I have a single edit script which gets called via iframe load by a fancybox click on the edit icon at the end of each row. The trick here is of course that the edit page being loaded needs to know which row to edit, and thus I want to pass this bit of vital information on to the loaded edit script.

To do this I capture the record id in the tag attribute of my edit image and then create a click handler to fire when any of the edit images are clicked upon. In my javascript section of code, I create an empty anchor tag which I then apply fancybox to in the usual manner, specifying of course that the anchor tag is of an iframe class and that it should load the base URL of my edit script.

Okay, so by now you’ve realized that instead of applying fancybox to each edit image like one would normally do, I’ve gone and simplified things by applying it to only one, unused and unseen element on the page. The final part of this trickery thus now lies in the click event handler attached to each of the edit images.

What we basically do is on click, grab the tag attribute of the clicked item (which contains the id of the record to be edited) and then use this value to alter the href attribute of our already fancyboxed anchor element, basically adding a GET variable to the edit script URL.

With this set, you simply trigger a click event on the anchor tag and presto, you now have a dynamic iframe fancybox loader! :)

So to get an idea of what the code would look like:

<img style=”cursor:pointer;” class=”edit-audit-image” tag=”ID134″ src=”images/b_edit.png”>
<img style=”cursor:pointer;” class=”edit-audit-image” tag=”ID263″ src=”images/b_edit.png”>

<div style=”display:none;”><a id=”edit-audit-fancybox” class=”iframe” href=”admin_edit_audit.php” title=”Edit Existing Audit”> </a></div>

//fancybox the hidden anchor tag
$("a#edit-audit-fancybox").fancybox({ 'hideOnContentClick': true, 'enableEscapeButton': true, 'frameHeight' : 600 });

//fire when an edit image is clicked	
		//append the tag of the clicked image to the end of the edit script URL
    $("a#edit-audit-fancybox").attr('href','admin_edit_audit.php?id=' + ($(this).attr('tag')))
    //force a launch of the fancybox


Related Link:

Related Posts:

About Craig Lotter

South African software architect and developer at Touchwork. Husband to a cupcake baker and father to two little girls. I don't have time for myself any more.

  • Or much simpler:

    $.fancybox('admin_edit_audit.php?id=' + ($(this).attr('tag')), { 'hideOnContentClick': true, 'enableEscapeButton': true, 'frameHeight' : 600 });

  • Much shorter code yes, but doesn't the way you suggest mean that a new fancybox instance is going to be created on each click? Looking at mine above, it would seem that I'm simply reusing the already instantiated fancybox instance (merely changing a parameter on it and not creating a new one from scratch).

  • Schadha1978

    did this work on FF. I have given it a try and while it seems to be working on IE locally not sure what happens on web, it is not working in FF. Only the first image, opens the fancybox in FF

    • yup, when I last used that technique, it worked across chrome, IE and Firefox. Just a note though, you really do have to keep up to date with the latest versions of jquery and fancybox to ensure they continue to support the newer versions of the browsers that get released

  • Jarek

    This is exactly what I was looking for! Thanks for sharing and keep up the good work!!!!

  • Jarek

    This is exactly what I was looking for! Thanks for sharing and keep up the good work!!!!

  • Bkilinc

    I think there is a better way; the onstart event
    /* ……. */
            ‘type’ : ‘iframe’,
            ‘onStart’ : function(a,b,c)
                $(this).attr(‘href’, ‘’);  /* enter dynamic url here */

  • lpo