CODEWITHSUNDEEP
javascriptjqueryhtmlfancybox
user3681993
user3681993

Reputation:

Fancybox inside fancybox( or nested fancybox)

I have three html pages, index.html, first.html and second.html. In index page I have a button B1. When I clicked on that button a fancy box is opened with contents of first.html. Inside fancybox , another button B2 is used. When B2 is clicked , second fancybox is open. 2nd fancy box is inside of first fancybox and the content of 2nd is second.html. The problem is size of 2nd fancybox is limiting inside of first fancybox. How can I increase the width and height of 2nd fancybox than that of 1st fancybox? Following is the code.

$(".fancybox").click(function () {
        var url = $(this).attr('url');
        $.fancybox.open({
            href: url,
            type: 'iframe',
            padding: 1,
            autoDimensions: true,
            autoScale: false,
        });
    });

I tried to set width and height but not worked.

Upvotes: 1

Views: 2462

Answers (3)

Abdallah Arffak
Abdallah Arffak

Reputation: 1193

You can use function onComplete then update height of your modal 

    $(".fancybox").click(function () {
            var url = $(this).attr('url');
            $.fancybox.open({
                href: url,
                type: 'iframe',
                padding: 1,
                autoDimensions: true,
                autoScale: false,
                onComplete: function(){
                    $('#fancybox-frame').bind('load',function(obj){
                            $('#fancybox-content').height(this.contentWindow.document.body.scrollHeight) // detect height of our frame and set it to modal
                            $.fancybox.resize();//auto resize
                    });
                }
            });
        });

This is a DEMO

Upvotes: 0

Thiago Felix
Thiago Felix

Reputation: 166

According to the documentation if you set "autoDimensions" to true, the width and height parameters are ignored.

Have you tried to set "margin" equal to 0? It will remove the space between the box and the viewport.

Take a look on this example: http://codepen.io/thiagofelix/pen/MYjNKE

$(document).ready(function () {
  $.fancybox({
    href: 'http://i.imgur.com/u0FXwTf.jpg',
    link: 'http://www.google.com.br',
    margin: 0,
    padding: 0,
    showCloseButton: false
  });
});

Upvotes: 2

websky
websky

Reputation: 3172

You can add to a button opening a second fancybox:

onclick="parent.window.document.getElementById('fancybox-wrap').style.width = '1000px';parent.window.document.getElementById('fancybox-wrap').style.height= '1000px'"

Upvotes: 1

Related Questions