CODEWITHSUNDEEP
jqueryfancyboxfancybox-2
Guillermo Moreno
Guillermo Moreno

Reputation: 31

How do you set different height/width for iframe in fancybox V2?

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?

Upvotes: 3

Views: 16543

Answers (1)

JFK
JFK

Reputation: 41143

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

Upvotes: 1

Related Questions