Fancybox изменить размер

Question

Я использую необычную коробку, которая отображает изображения, ссылку на видео YouTube и другие видео.Пользователь может перемещаться в необычном окне, чтобы перейти к следующему или предыдущему отображению.Моя проблема в том, что модная коробка не масштабируется в зависимости от отображаемого контента.Мой код выглядит следующим образом:

$.fancybox(href,{
                'autoScale': true,
                'autoDimensions': true,
                'padding': 30,
                'transitionIn': 'none',
                'transitionOut': 'none',
                'type': 'iframe', //'iframe', //'image',
                'changeFade': 300,
                'cyclic': false,                  

            });

Я пытался решить эту проблему, вызывая функцию в "onComplete", но пока безуспешно.Пожалуйста, предоставьте несколько входов по этому вопросу.

Спасибо

Answer 1

установка "AutoScale" в false должна работать ...

Answer 2

В моем случае при использовании Fancybox 2 параметр назывался fitToView

, установите его в true

, вот что я использую для запуска fancybox, вам не нужно помещать его вготов

(function($){
    $(document).on('click','.fancybox',function(e){
        //don't follow link
        e.preventDefault();

        //update fancybox image registry for gallery and open it
        var fbox = $('.fancybox');
        //this always opens the first image first
        $.fancybox(fbox,{
            index: fbox.index(this),
            padding: 5,
            live: false,
            helpers : {
                overlay : {
                    css : {
                        'background-color' : 'rgba(17, 17, 17, 0.3)',
                    },
                    closeClick: true,
                    showEarly : true,
                    locked : false //if true, causes background to jump
                },
                thumbs  : {
                    width   : 140,
                    height  : 100,
                    source  : function(item) {
                        var href = $(item.element).data('thumb');
                        if(typeof href === 'undefined'){
                            if (item.element) {
                                href = $(item.element).find('img').attr('src');
                            }
                            if (!href && item.type === 'image' && item.href) {
                                href = item.href;
                            }
                        }
                        return href;
                    }
                }
            },
            scrolling: 'visible',
            fitToView: true,
            iframe:{
                scrolling : 'auto',
                preload   : false
            }
        });
    });
})(jQuery);

Answer 3

Вам нужно позвонить в новый модный ящик внутри старого. Если вы «откроете» новый fancybox из первого, он изменит свой размер. Попробуйте:

<script type="text/javascript">
$(document).ready(function() {
  var content = '
  <div id="nextbox">Box 1</div>

  <script type="text/javascript">
  $("#nextbox").click(function() {
    $.fancybox('Box2',{
      'autoDimensions': false,
      'height' : 400,
      'width' :400
    });
  });
  </script>
  ';

  $.fancybox(content,{
    'autoDimensions': false,
    'height' : 200,
    'width' : 200
  });

</script>

Откроется окно с надписью «Box 1». Когда вы нажмете «Box 1», он изменит размер с 200px на 200px до 400px на 400px и изменит текст на «Box 2». И вы можете продолжать делать это столько раз, сколько хотите.

Я вижу, что вопрос старый, но надеюсь, что кто-то может использовать это, поскольку я долго боролся с тем, чтобы выяснить, как изменить размер fancybox после его запуска.

Answer 4

Я ни в коем случае не веб-разработчик, но в документации говорится:

$.fancybox.resize      Auto-resizes FancyBox height to match height of content 

Это то, что вы хотите?