Автоматическое изменение высоты в Fancybox

В попытке не взломать другие посты я решил создать свой собственный. Я возился в течение нескольких дней и не могу понять, как получить высотуFancybox iFrame автоматически изменяет размер содержимого. Вот как я это называю:

<script type="text/javascript">
    $(document).ready(function() {
        $(".various").fancybox()({
            maxWidth    : 713,
            minHeight   : 250,
            fitToView   : false,
            autoSize    : true,
            autoScale   : true,
            closeClick  : true,
            openEffect  : 'fade',
            closeEffect : 'fade',
            scrolling   : false,
            padding     : 0,
        });
    });
</script>

Я думал, что установка minHeight и autoScale сделает это, но это не так. И используяresize(); ничего не делает.

Спасибо всем!

Ответы на вопрос(2)

Я знаю, что это старая ветка, но я уверен, что это поможет другим людям, которые приземляются здесь. Даже если вы не можете контролировать содержание iframe, оставивfitToView параметр в его значении по умолчанию (true) и вызывает Fancyboxupdate() метод изменения размера окна:

$(window).resize(function() { $.fancybox.update(); }); Однако, если вы также отображаете другой контент (например, изображения в формате PDF и т. Д.), Fancybox автоматически подгоняет их под размер экрана. В этом случае вы, конечно, можете инициализировать fancybox для фреймов и изображений с разными параметрами.

 05 окт. 2016 г., 20:38
хороший трюк, спасибо

Во-первых, я надеюсь, что вы понимаете, что вы имеете в виду, когда говорите «Fancybox iFrame», что означает, что вы открываете внешний файл html / php с помощью параметра fancybox.iframeлибо установив его какclass в вашей ссылке, как:

<a href="external.html" class="fancybox fancybox.iframe">open external file in fancybox</a>

(Я предполагаю, что вы используете fancybox v2.x, потому что параметры в вашем сценарии) ... или как параметр в вашем пользовательском сценарии:

$(".fancybox").fancybox({
 width: 620, // or whatever
 heigh: 320,
 type: "iframe"
});

Во-вторых, вы должны остерегаться, что варианты для fancyboxv1.3.x а такжеv2.x не совместимы друг с другом. Например, вы используете в своем скриптеfitToView (fancybox v2.x) иautoScale (V1.3.x). Если вы действительно используете fancybox v2.x,autoScale не будет признано.

В третьих,resize() это не вариант для fancybox v1.3.x или v2.x. Если вы используете v2.x, вам лучше использовать$.fancybox.update()

И, наконец, единственный возможный (должен сказать, «самый простой») способ, которым я считаю «авто» изменить размер fancybox при открытии вiframe режим есть:

you should have control over the external.html page you want to open (you should own it and running eventually within the same domain) so you can add the elements that fancybox would need to resize it. Other pages that are not yours (picssel.com for instance) won't allow you to auto-resize the iframe automatically (you could re-size them manually but I don't think that's the idea.) you should be using fancybox at least 2.0.6+

Как?

Отредактируйте свойexternal.html файл и установить размеры в<html> пометить как

<html lang="en" style="width: 800px; height: 400px;">

(вы можете назначитьheight только собственность)

Затем используйте опцию обратного вызоваbeforeShow чтобы получить измерение отiframe лайк:

  beforeShow: function(){
   this.width = $('.fancybox-iframe').contents().find('html').width();
   this.height = $('.fancybox-iframe').contents().find('html').height();
  }

также,fitToView должен быть установлен вfalse

Проверьтеhttps://stackoverflow.com/a/10776520/1055987 для примера кода, который также включает в себя ДЕМО.

 15 мая 2014 г., 14:48
Очень хороший ответ - один из лучших, которые я видел на SO.
 30 авг. 2012 г., 20:30
+1 @JFK Отличный ответ
 HedKandiMan13 июн. 2012 г., 13:23
О, мальчик, я был глупым, не так ли? Я действительно владею контентом, на который ссылаются, и он находится в том же месте. Я также использую последнюю версию FancyBox, загруженную с их сайта. Поэтому я должен добавить функцию beforeShow к коду, который я первоначально перечислил, и удалить свойства width и height из этого исходного кода? Спасибо Вам большое!
 12 июн. 2012 г., 20:11
Это отличный и хорошо напечатанный ответ. О Fancybox
 13 июн. 2012 г., 17:55
@ user1440201 Если вы добавляете размеры на свою внешнюю страницу в<html> тег, например, тогда я думаю, вы можете удалитьwidth а такжеheight из вашего кода. ПустьbeforeShow вариант получить размер изiframe, Если вы считаете, что это правильный ответ, пожалуйста, не забудьте принять его.meta.stackexchange.com/a/5235

Ваш ответ на вопрос