<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Dark Crimson Blog &#187; Fancybox</title>
	<atom:link href="http://blog.darkcrimson.com/tag/fancybox/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.darkcrimson.com</link>
	<description>The Blog of Ben Lister</description>
	<lastBuildDate>Fri, 13 Aug 2010 02:18:06 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.6</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Set a Dynamic Width / Height on Fancybox</title>
		<link>http://blog.darkcrimson.com/2010/03/set-a-dynamic-width-height-on-fancybox/</link>
		<comments>http://blog.darkcrimson.com/2010/03/set-a-dynamic-width-height-on-fancybox/#comments</comments>
		<pubDate>Wed, 10 Mar 2010 02:55:56 +0000</pubDate>
		<dc:creator>Ben Lister</dc:creator>
				<category><![CDATA[jQuery]]></category>
		<category><![CDATA[AJAX]]></category>
		<category><![CDATA[Fancybox]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Tutorial]]></category>

		<guid isPermaLink="false">http://blog.darkcrimson.com/?p=182</guid>
		<description><![CDATA[Fancybox is a powerful, lightweight jQuery based lightbox script that offers developers an impressive variety of content display options. I&#8217;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 [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://fancybox.net/">Fancybox</a> is a powerful, lightweight jQuery based lightbox script that offers developers an impressive variety of content display options. I&#8217;ve used this script many times in the past (including <a href="http://darkcrimson.com/portfolio" target="_blank">my portfolio</a>) and have never run into any  limitations in terms of functionality until a recent project required many lightboxes with varying sizes. <span id="more-182"></span>Since the site used Fancybox&#8217;s <code>iframe</code> functionality to display articles with custom-sized graphics and Fancybox&#8217;s API does not offer a dynamic size option I created a simple DOM based jQuery solution:</p>
<pre name="code" class="javascript">
    $('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'
			});
      });
</pre>
<p>With this code in place Fancybox can be called by simply adding the class <code>fb_dynamic</code> and then specifying the width and height in the URL&#8217;s parameters:</p>
<pre name="code" class="html">
<a class="fb_dynamic" href="http://darkcrimson.com/?width=400&#038;height=300">Free iPods!!!!</a>
</pre>
<p><strong>Going one step further</strong>, 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 <code>SWF</code> or <code>AS</code> file:</p>
<pre name="code" class="javascript">
	/**************************************************************
	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 + '&#038;height=' + h );
				fbflash.trigger('click');
			}
          $(function () {
              // Create dynamic link, change append location to change FB animation start point
	      $('#body').append(' <a href="javascript:void(0)" id="fbflash" class="fb_dynamic">&nbsp;</a>');
          });
</pre>
]]></content:encoded>
			<wfw:commentRss>http://blog.darkcrimson.com/2010/03/set-a-dynamic-width-height-on-fancybox/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
	</channel>
</rss>
