Fancybox внутри fancybox (или вложенной fancybox)

Question

У меня есть три html-страницы, index.html, first.html и second.html. На индексной странице у меня есть кнопка B1. Когда я щелкнул по этой кнопке, открывается окно с изображением first.html. Внутри fancybox используется другая кнопка B2. Когда нажата клавиша B2, открывается вторая fancybox. Второй причудливый ящик находится внутри первого fancybox, а содержимое второго - second.html. Проблема в размере 2-го fancybox ограничивает внутри первого fancybox. Как увеличить ширину и высоту 2-го fancybox, чем 1-го fancybox? Ниже приведен код.

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

Я попытался установить ширину и высоту, но не работал.

Answer 1

Согласно documentation, если вы установите «autoDimensions» истинно, параметры ширины и высоты игнорируются.

Вы пытались установить «margin» равным 0? Он удалит пространство между полем и окном просмотра.

Взгляните на этот пример: 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 
    }); 
}); 

Answer 2

Вы можете добавить кнопку открытия второй FancyBox:

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

Answer 3

Вы можете использовать функцию OnComplete затем обновить высоту вашего модальный

$(".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 
        }); 
       } 
      }); 
     }); 

Это DEMO