How do you set different height/width for iframe i

Question

I have been using Fancybox 1.3.4, and right there I have the dimensions of the iframe in the link itself.

Here is an example of how I have it

test.html?width=675&height=470

When I click on the link fancybox will open the iframe with those dimensions. I am trying Fancybox V2, but I'm confused on how to set the dimensions for the iframes. I want every iframe to have different dimensions. How would I do it?

Answer 1

Set your html (with HTML5 DOCTYPE) like this:

<a class="fancybox fancybox.iframe" data-width="675" data-height="470" href="test.html" >test</a>
<a class="fancybox fancybox.iframe" data-width="400" data-height="200" href="test2.html" >test 2</a>

(set width and height on the data- attributes for each element)

then this script:

$("a.fancybox").fancybox({
  fitToView: false,
  afterLoad: function(){
   this.width = $(this.element).data("width");
   this.height = $(this.element).data("height");
  }
 }); // fancybox

should do the trick in fancybox v2.x