Ширина и высота вопроса с fancybox

Question

Когда я добавил этот код, настройка ширины и высоты не работает

jQuery(document).ready(function() {
  $('a.iframe').fancybox(); 
});

Какие есть варианты, чтобы обойти это?

Answer 1

Ознакомьтесь с документацией здесь: http://fancybox.net/api

Вы используете встроенный контент, поэтому убедитесь, что для параметра autoDimensions установлено значение false вместе с настройками ширины и высоты.

ОБНОВЛЕНИЕ: Я успешно протестировал следующее решение:

    $('a.fbtag').fancybox({
        autoDimensions: false,
        height: 300,
        width: 400
    }); 

Предполагается, что имя класса открываемой ссылки - 'fbtag'.

Answer 2

Ширина и высота Fancy Box всегда зависят от типа носителя.

Если мы предоставим 5 * 5-пиксельное изображение - появится Fancy Box с размерами Image Dimensions.

Для противодействияВлияние размеров носителя и определения ширины и высоты по умолчанию для Fancy Box

Попробуйте:

$.fancybox.open(collection.toJSON(), {
   afterShow :function(){},
   maxHeight    : 600,
   minWidth : 500           
}); 

Ширина FancyBox будет минимальной - 500 пикселей.

FancyBox Height будетбыть пропорциональным данным FancyBox с максимальной высотой 600 пикселей.

Answer 3

$(document).ready(function() {
    $(".fancy-ajax").fancybox({
        type:           'ajax',
        autoDimensions: false,
        'autoSize':     false,
        'height':       'auto'
    });
});

Вышеуказанные коды работали для меня. Тем не менее, я проектировал в Twitter Bootstrap.

Answer 4

Например

$.fancybox({
    'content':"This will be the content of the fancybox",
    'width':'500',
    'autoDimensions':false,
    'type':'iframe',
    'autoSize':false
});

Answer 5

вы можете сделать это двумя способами

с iframe

   $(document).ready(function () {
        $(".fancybox").fancybox({
            width:600,
            height:400,
            type: 'iframe',
            href  : 'url_here'
       });
     })

Без iframe

 $(document).ready(function () {
    $(".fancybox").fancybox({
        width:600,
        height:400,
        autoDimensions: false,
   });
 })