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

Как правильно передать размеры в 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 {}
И автозайз не отключать. при таком подходе ширину указать точно можно, а высота сама подстраивается.. Но как то это вроже корявое решение.
 
Последнее редактирование:

AnrDaemon

Продвинутый новичок
Ты код прочёл? Он автоматом выключает автосайз, если явно заданы размеры.
 
VANHALEN

VANHALEN

Новичок
Ты код прочёл? Он автоматом выключает автосайз, если явно заданы размеры.
Нажмите для раскрытия...
Именно.. не просто прочёл. Я его написал. Должен выключать, но не выключает
Код: 
 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, или сколько угодно, то разумеется всё работает.

Собственно в чём я хочу разобраться. Как написать правильно, чтобы оно работало. Вижу, что отключение автосайза нужно писать с условием или, но это уже детали..
 
Последнее редактирование:

AnrDaemon

Продвинутый новичок
А там скорее всего нет АТТРИБУТА width :)
Ты путаешь аттрибуты и стили.

Либо приводи пример минимального рабочего кода.
 
VANHALEN

VANHALEN

Новичок
А там скорее всего нет АТТРИБУТА 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
Нажмите для раскрытия...
Но идею хорошую подал.. А то что-то мусор в голове. Сейчас прямо в коде инициализации чётко пропишу, без всяких условий, чтобы убедиться, что то, что я хочу передать в скрипт из условия, действительно работает.
 
WMix

WMix

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

очень даже может быть что размеры задаются после beforeLoad
 
VANHALEN

VANHALEN

Новичок
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%';} На высоту документов открытых со своего домена, не влияет, она равна высоте материала, а фрейм с другого домена открывает на всю высоту. Без этого - узкая полоска. Вобщем будет чем на досуге себя занять
 
Войдите или зарегистрируйтесь для ответа.
Сверху