CODEWITHSUNDEEP
jqueryfancybox
dpDesignz
dpDesignz

Reputation: 1959

Fancybox 2 Height not working

I'm trying to get two different heights from my fancybox depending on which link the client clicks on, but for some reason the height just keeps going to 100%. It's not going to the height I'm wanting

This is my code

$('.fancyboxhd').fancybox({
  width: 1287,
  height: 720
});
$('.fancyboxsd').fancybox({
  width: 640,
  height: 360,
});

It's an iFrame content

Upvotes: 12

Views: 42576

Answers (2)

reza.cse08
reza.cse08

Reputation: 6178

for v2.1.5 you can use this by using the id of html element.

<a id="item1" class="fancybox" href="http://fiddle.jshell.net/YtwCt/show/">Open 500x200</a>

<br />

<a id="item2" class="fancybox" href="http://fiddle.jshell.net/YtwCt/show/">Open 200x500</a>

<div id="test" style="display:none">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, nulla eu interdum posuere, nisi mauris cursus nisi, nec faucibus nibh urna nec turpis.


$(".fancybox-wrap").draggable();
$(".fancybox")
    .attr('rel', 'gallery')
    .fancybox({
        type: 'iframe',
        autoSize : false,
        beforeLoad : function() {         
            if ($(this.element).attr('id') == 'item1') {
                this.width  = 500;
                this.height = 200;
            }
        else {
                this.width  = 200;
                this.height = 500;
            }
        }
    });

Upvotes: 0

JFK
JFK

Reputation: 41143

(see edit below for an improved answer)

For iframe content, your html should look like

<a class="fancyboxhd fancybox.iframe" href="hdfile.html">hd</a>
<a class="fancyboxsd fancybox.iframe" href="sdfile.html">sd</a>

then add these two options to your scripts

fitToView   : false,
autoSize    : false

so your scripts should look like

$(document).ready(function(){
 $('.fancyboxhd').fancybox({
   width : 1287,
   height : 720,
   fitToView : false,
   autoSize : false
 });
 $('.fancyboxsd').fancybox({
   width: 640,
   height: 360,
   fitToView : false,
   autoSize : false
 });
});

### EDIT ### : (Sep 05, 2013)

The code can be improved and simplified using (HTML5) data-* attributes in the anchors and the same class for both options like :

HTML

<a class="fancybox fancybox.iframe" data-width="1287" data-height="720" href="hdfile.html">HD</a>
<a class="fancybox fancybox.iframe" data-width="640"  data-height="360" href="sdfile.html">SD</a>

JS

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

See JSFIDDLE

NOTE: At the time of this edit, demo used fancybox v2.1.5.

Upvotes: 59

Related Questions