Set a Dynamic Width / Height on Fancybox

Note: This article was written in March 2010 for FancyBox v.1.3.0 and may need to be tweaked for later versions such as FancyBox 2.

Fancybox is a powerful, lightweight jQuery based lightbox script that offers developers an impressive variety of content display options. I’ve used this script many times in the past (including my portfolio) and have never run into any  limitations in terms of functionality until a recent project required many lightboxes with varying sizes. Since the site used Fancybox’s iframe functionality to display articles with custom-sized graphics and Fancybox’s API does not offer a dynamic size option I created a simple DOM based jQuery solution:

    $('a.fb_dynamic').each(function(){
           var dWidth 	= parseInt($(this).attr('href').match(/width=[0-9]+/i)[0].replace('width=',''));
           var dHeight 	=  parseInt($(this).attr('href').match(/height=[0-9]+/i)[0].replace('height=',''));
			$(this).fancybox({
				'width':dWidth,
				'height':dHeight,
				'autoScale'     	: false,
				'transitionIn'		: 'elastic',
				'transitionOut'		: 'elastic',
				'type'			: 'iframe'
			});
      });

With this code in place Fancybox can be called by simply adding the class fb_dynamic and then specifying the width and height in the URL’s parameters:

Free iPods!!!!

Going one step further, if you need to make the Fancybox call from Flash (another feature not in the API) you can create a simple JavaScript function and make the call from your SWF or AS file:

	/**************************************************************
	Call Fancybox from Flash with a Dynamic width and Height
		@w = integer [width]
     @h = integer [height]
     @u = string [url]
      example funtion call: flashFancybox(500,600,'http://darkcrimson.com')
	***************************************************************/
			function flashFancybox(w,h,u) {
			    var fbflash = $('a#fbflash');
                                fbflash.attr('href', u+ '?width=' + w + '&height=' + h );
				fbflash.trigger('click');
			}
          $(function () {
              // Create dynamic link, change append location to change FB animation start point
	      $('#body').append('  ');
          });

16 comments on “Set a Dynamic Width / Height on Fancybox

  1. Just used the simple non-flash version on a site. Brilliant idea using parameters for the height/width! Thanx a lot:-)

    Also, if you set the ‘autoScale’ to ‘true’ then it’ll make the window the size you want on a big screen but shrink to within window bounds on a small one which is handy.

    Rob

  2. This code just saved my butt. What a great idea just adding the parameters to the URL. And to think I was going to add two columns to my MySQL database to store the parameters!

    Thanks again!

  3. I added the following code incase the height and width were not specified. I’m sure it could be cleaner. O well.

    if($(this).attr(‘href’).match(/width=[0-9]+/i))
    {
    var dWidth = parseInt($(this).attr(‘href’).match(/width=[0-9]+/i)[0].replace(‘width=’,”));
    }
    else
    {
    var dWidth=$(window).width();
    }
    if($(this).attr(‘href’).match(/height=[0-9]+/i)){
    var dHeight = parseInt($(this).attr(‘href’).match(/height=[0-9]+/i)[0].replace(‘height=’,”));
    }
    else
    {
    var dWidth=$(window).width();
    }

  4. i too cannot get the iframe dynamic height to work, using your exact code. how about an example to show that it actually works?

  5. i added the above mentioned iFrame-code to my site but it doesn´t work. Fancybox just opens the link in a new window…

    do i add the code to the index.html or to the fancybox javascript?

    • The code should be applied in the same spot you are applying the call to fancybox. Many people have this in a different JS file that contains other actions but it could be placed directly on your HTML page as well.

      If you are still stuck, I would suggest getting it to work with the methods described in fancybox’s documentation and then try to add the dynamic functionality.

  6. trying to get FancyBox called from swf… I’ve used the above but for the life of me I just cant get it to work…
    any advise would be extremely helpful
    many thanks
    Gary

    • Gary,

      I took a look at your link and I would suggest first verifying that your FancyBox call works with the conventional method first (just make the link visible). If it is working as intended then double check your Action Script to make sure that it is calling the function correctly.

  7. Fantastic! I’ve been searching everywhere and this is the best way to change SWF files too :D Thank you so much!

  8. HI~

    I am trying to use the above code on my flash site and i am having a bit of trouble. For some reasons the buttons are not opening the links.

    Best,
    Petra

    • Hi Petra,

      It might be an issue with the way you are calling the function from Flash. In Flash you need to have something like this:

      getURL("javascript: flashFancybox
      (500,600,'http://google.com')");

      This should call the JavaScript function which triggers the Fancy Box.