pass the width and height (and other) parameters to fancybox dynamically

[JFK]

There have been several request in the forum about how to pass the
width and height parameters to fancybox dynamically. In a way, it does
make sense since you may have the same type of object (swf or iframe)
but with different dimensions .... and you don't want to create a
different fancybox script for each of them (and definitively not if
you have 50 or 60 for instance).

The workaround provided so far was with the use of the metadata plugin
(see posts below)
http://groups.google.com/group/fancybox/browse_thread/thread/92cf7588cd02dbd4/
http://groups.google.com/group/fancybox/browse_thread/thread/29617e0f7b901566/
and
http://groups.google.com/group/fancybox/msg/ae544ce28a16ec87

I have personally tested and used this workaround some times and it
proves to be good enough for what is needed, however it implies the
use of another plugin, which also has its own (non-evident) syntax and
rules.

An alternative solution (without needing any other plugin) is to
create a javascript function and pass the parameters onclik.
NOTE: we have to pass the url too otherwise the function will open
fancybox and then it will jump to the target in another window. if we
prevent the default behavior, the value of href will be undefined

so here is the function:

<script type="text/javascript">
function fancyboxMe(fbHref, fbWidth, fbHeight) {
$.fancybox({
// regular fb options
'padding': 0,
'overlayColor': '#ccc',
'type' : 'swf',
// etc, etc.
// fb variables
'href' : fbHref,
'width': fbWidth,
'height':fbHeight
});
}
</script>

and call the function onclick:
<a href="javascript:;" onclick="fancyboxMe('path/swfone.swf',400,
320)">open first swf in 400x320 box</a>
<a href="javascript:;" onclick="fancyboxMe('path/swftwo.swf',800,
480)">open second swf in 800x480 box</a>

*********************************
we could extend the amount of parameters to pass to fit our needs, for
instance, use the same function to open either swf objects or iframes:

<script type="text/javascript">
function fancyboxMe2(fbHref, fbWidth, fbHeight, fbType) {
$.fancybox({
'padding': 0,
'overlayColor': '#ccc',
// fb variables
'href' : fbHref,
'width': fbWidth,
'height':fbHeight,
'type' : fbType
});
}
</script>

and then
<a href="javascript:;" onclick="fancyboxMe2('http://www.adobe.com/jp/
events/cs3_web_edition_tour/swfs/perform.swf',400, 320, 'swf')">open
swf type in 400x320 box</a>

<a href="javascript:;" onclick="fancyboxMe2('http://
google.com/','90%', '80%', 'iframe')">open google in iframe type
90%width x 80%height</a>

<a href="javascript:;" onclick="fancyboxMe2('http://fancybox.net/',
720, 380, 'iframe')">open fancybox.net in iframe type 720x380 pixels</
a>

FINAL NOTES:
- I won't recommend this workaround for regular fancybox scenarios but
it may be useful in some cases
- bear in mind that your HTML code can get really, really messy
- also, if javascript is disable, the visitor won't have access to the
content
- use it at your own risk