Меню
Что нового?

Как правильно передать размеры в FancyBox

VANHALEN

VANHALEN

Новичок
Здравствуйте!
Давно пользуюсь фанкибоксом и решил для ифреймов иметь возможность передавать размеры окна прямо в атрибутах сылок. Попробовал вот так вот.

Код: 
$(".modal_iframe")
        .fancybox({
     
        beforeLoad: function() {
            if (this.width = $(this.element).attr('width')) {this.autoSize = 'false'; this.width = $(this.element).attr('width');} else {this.width = 'auto';}
            if (this.height = $(this.element).attr('height')) {this.height = $(this.element).attr('height');} else {}
            },

            type : 'iframe',
            fitToView    : true,
            margin      : [10, 10, 10, 10],
            padding:    [30, 10, 10, 10],
            helpers : {
                overlay : {closeClick : false},
                title    : {type : 'inside_top' }
            }
        });

Посмотрел доки. Чтобы не растягивало, нужно autoSize: false, а я в ява скрипте практически не в зуб ногой. Вроде попытался в условии его передать, но он просто игнорируется. Идём дальше - смотрим на условие в котором к ссылке добавлен атрибут width. Смотрим, что в противном случае, я попытался передать auto, а скрипту по барабану. Если пишу в процентах, или в просто в пикселах, тогда работает, а если авто - игнорирует. аналогично с aгtoWidth. Ну это я ещё могу понять и пережить, задав ширину по умолчанию руками. а вот как отключить авторазмер? Думаю понятно, что ниже я его не могу отключать.

Пока что решил для себя так
Код: 
            if (this.width = $(this.element).attr('width')) {this.width = $(this.element).attr('width');} else {this.width = '700';}
            if (this.height = $(this.element).attr('height')) {this.height = $(this.element).attr('height');} else {}
И автозайз не отключать. при таком подходе ширину указать точно можно, а высота сама подстраивается.. Но как то это вроже корявое решение.
 
Последнее редактирование:
Ты код прочёл? Он автоматом выключает автосайз, если явно заданы размеры.
 
Ты код прочёл? Он автоматом выключает автосайз, если явно заданы размеры.
Нажмите для раскрытия...
Именно.. не просто прочёл. Я его написал. Должен выключать, но не выключает
Код: 
 if (this.width = $(this.element).attr('width')) {this.autoSize = 'false'; this.width = $(this.element).attr('width');} else {this.width = 'auto';}
Сразу прошу прощение, если буду тупить.. давайте переводить вместе. код выше.
(Если в атрибутах картинки найден атрибут ширина) {отключаем автосайз и указываем какой ширины хотим окно} если нет {ширина задаётся автоматически}
Это в теории. На деле ширина действительно при выполнении первого условия устанавливается, я действительно получаю окно нужной мне шинины, но я абсолютно точно знаю, что первое действие в выполненом условии this.autoSize = 'false' напрочь игнорируется, потому что подставляя его в такое же условие с высотой, окно фрейма один хер вытягивается в высоту по содержимому. Отсюда я делаю вывод, что я дуб в ява скипте и this.autoSize = 'false' - просто неправильно написаный и ничего не значащий для скрипта кусок кода. Это проблема номер раз.
Проблема номер два - else {this.width = 'auto';} - результат узкая полоска. Я уже даже не помню уточнял я вариант, если внутри фрейма будет например блок с указанными размерами. точно помню что пару абзацев текста - точно полоска шириной с переданный мной в параметрах заголовок окна, ни больше, ни меньше. Делаю вывод, что тоже что-то неправильно написал. Если указать вместо auto, 50%, или 300, или 700, или сколько угодно, то разумеется всё работает.

Собственно в чём я хочу разобраться. Как написать правильно, чтобы оно работало. Вижу, что отключение автосайза нужно писать с условием или, но это уже детали..
 
Последнее редактирование:
А там скорее всего нет АТТРИБУТА width :)
Ты путаешь аттрибуты и стили.

Либо приводи пример минимального рабочего кода.
 
А там скорее всего нет АТТРИБУТА width :)
Ты путаешь аттрибуты и стили.
Нажмите для раскрытия...
да с хера ли? вот их API http://fancyapps.com/fancybox/#docs
Если нет, почему он тогда работает? Ну и чтобы не искать цитирую
widthDefault width for 'iframe' and 'swf' content. Also for 'inline', 'ajax' and 'html' if 'autoSize' is set to 'false'. Can be numeric or 'auto'.
Number, String; Default value: 800
heightDefault height for 'iframe' and 'swf' content. Also for 'inline', 'ajax' and 'html' if 'autoSize' is set to 'false'. Can be numeric or 'auto'
Number, String; Default value: 600
Нажмите для раскрытия...
Но идею хорошую подал.. А то что-то мусор в голове. Сейчас прямо в коде инициализации чётко пропишу, без всяких условий, чтобы убедиться, что то, что я хочу передать в скрипт из условия, действительно работает.
 
не знаю есть он там или нет, но я точно знаю что в js есть console.log() я бы начал с него. в дополнение ко всему, в chrome control + shift + i элементы уже описаны on-fly со всеми аттрибутами. ну и не в последнюю очередь, fancybox.js это открытый текст, его можно читать и даже дебажить (когда в голове не умещается) темже console.log()

очень даже может быть что размеры задаются после beforeLoad
 
WMix написал(а):
не знаю есть он там или нет, но я точно знаю что в js есть console.log() я бы начал с него. в дополнение ко всему, в chrome control + shift + i элементы уже описаны on-fly со всеми аттрибутами. ну и не в последнюю очередь, fancybox.js это открытый текст, его можно читать и даже дебажить (когда в голове не умещается) темже console.log()

очень даже может быть что размеры задаются после beforeLoad
Нажмите для раскрытия...
Подебажу на досуге. да я пользуюсь постоянно этими инструментами, только для другого совсем. Решил вроде проблему так
Код: 
$(".modal_iframe")
        .fancybox({   
        beforeLoad: function() {   
            if (this.width = $(this.element).attr('width')) {this.maxWidth = $(this.element).attr('width');} else {this.width = '800';}
            if (this.height = $(this.element).attr('height')) {this.maxHeight = $(this.element).attr('height');}    else {this.height = '100%';}
            },
            type : 'iframe',
            openEffect : 'elastic',
            closeEffect : 'elastic',
            arrows : false,
            closeClick : false,
            scrolling: 'auto',
            fitToView    : true,
            autoSize: true,
            //width: 300, // Вот отсюда я вытащил размеры
            //height: 200, //

            margin      : [10, 10, 10, 10],
            padding:    [39, 10, 10, 10],
            helpers : {
                overlay : {closeClick : false},
                title    : {type : 'inside_top' },
            }
        });
Там есть ещё значения max. Как ни странно. это действительно немного лыжи не едут. При выставлении по условию значения max, вроде как отпадает сразу необходимость выставлять autoSize: false. Да и maxHeight он не игнорирует при любом раскладе. В высоте выставил else {this.height = '100%';} На высоту документов открытых со своего домена, не влияет, она равна высоте материала, а фрейм с другого домена открывает на всю высоту. Без этого - узкая полоска. Вобщем будет чем на досуге себя занять
 
Войдите или зарегистрируйтесь для ответа.
Сверху