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

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

<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(); ничего не делает.

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

источник

2012-06-12 HedKandiMan

Во-первых, я надеюсь, вы понимаете, что вы имеете в виду, когда вы говорите «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" 
});

Во-вторых, вы должны остерегаться что варианты для fancybox v1.3.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 является:

вы должны иметь контроль над страницей external.html, которую вы хотите открыть (вы должны владеть ею и работать в конечном итоге в том же домене), чтобы вы могли добавлять элементы, которые fancybox необходимо изменить. Другие страницы, которые не являются вашими (например, picssel.com), не позволят автоматически изменять размер iframe (вы можете изменить размер вручную, но я не думаю, что это идея.)
вы должны использовать fancybox не менее 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 на образец кода, который также включает в себя ДЕМО.

источник

2012-06-12 18:07:53 JFK

Это отличный и хорошо типизированный ответ. Oh Fancybox –

О, мальчик, я был глупый, не так ли !? Я действительно владею контентом, который связан с ним, и он находится в том же месте. Я также использую последнюю версию FancyBox, загружаемую с их сайта. Поэтому я должен добавить функцию beforeShow к коду, который я изначально перечислял, и удалить свойства ширины и высоты из этого исходного кода? Спасибо Вам большое! – HedKandiMan

@ user1440201 Если вы добавляете размеры на внешнюю страницу в тег '', то, я думаю, вы можете удалить 'width' и' height' из своего кода. Пусть опция 'beforeShow' получает размер от' iframe'. Если вы считаете, что это правильный ответ, пожалуйста, не забудьте принять его. http://meta.stackexchange.com/a/5235 – JFK

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

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

источник

2014-12-12 01:21:03 Marventus

хороший трюк, спасибо –

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

ответ

Смежные вопросы