Search code examples
javascriptjqueryiframefancyboxfancybox-2

fancybox v2 iframe height resize


Is there a way to make the below script apply to just iframe in fancybox? I have a page with both gallery and iframe. I want the iframe to have different heights without affecting the image sizes.

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

Solution

  • You can set a condition to validate the type of content before passing the data-* values to fancybox like :

    $(".fancybox").fancybox({
        afterLoad: function () {
            if (this.type == "iframe") {
                this.width = $(this.element).data("width");
                this.height = $(this.element).data("height");
            };
        }
    });
    

    JSFIDDLE


    You could also refer to $(this) like this.element

    $(".fancybox").fancybox({
        afterLoad: function () {
            if (this.type == "iframe") {
                this.width = this.element.data("width");
                this.height = this.element.data("height");
            };
        }
    });
    

    JSFIDDLE