Как заставить lightbox автоматически менять размер в соответствии с содержимым? [РЕШЕНО]

[Maholyot]

Как заставить lightbox подстраиваться под разные размеры выводимого содержимого, конкретно формы заказа?
Нигде не могу найти. Казалось бы простая функция, но уже день положил, чтобы найти информацию.

Задача простая, есть кнопка, при нажатии открывается форма в lightbox. Из этой формы можно перейти в другую форму, которая меньше по размеру.
Я хочу, чтобы размеры предыдущего lightbox подстроились под новое содержимое.

Как это сделать?

Из описанных функций http://fancybox.net/api работают далеко не все.

Пытался пойти другим путём и просто задать функцию, чтобы при нажатии на ссылку текущий lightbox закрывался, а новый открывался. Тоже ничего не смог сделать. Какая-то засада :(

[anonimus]

делайте размер лайтбокса по наибольшей форме

[Maholyot]

делайте размер лайтбокса по наибольшей форме

Так и сделал, но это скорей временное решение. А что, всё так плохо? Неужели нет решения?

[Maholyot]

Если кому интересно, то я всё же добился своего. Правда есть пару нюансов, если кто может, подскажите как из исправить.

Итак, чтобы сделать Лайтбокс подстраивающимся под содержимое, не подойдут стандартные настройки для линка с выводом в качестве лайтбокса. Видимо так задумано, но из всего списка с http://fancybox.net/api работает очень малое количество команд. Нужен принципиально другой подход.
Необходимо прописать скрипт. Чтобы это сделать, создаём HTML блок. В нём пишем скрипт для вывода содержимого с другой страницы. В качестве непосредственной ссылки можно использовать обычный текстовый линк или заранее созданную кнопку, ссылаясь на её ID:

<a id="zakaz" href="/ссылка на вашу страницу.php"><strong>КУПИТЬ ТОВАР</strong></a>

<script>
$("a#zakaz").fancybox({

'type' : 'ajax',
'width' : 445,
'height' : 613,
'padding' : 15,
'scrolling' : 'no',
'autoDimensions' : false

});
</script>

Пояснения по скрипту:
В скрипте мы будем ссылаться на id="zakaz", поэтому и в строке $("a#zakaz") тоже должно фигурировать zakaz.
Тип всплывающего окна должен быть обязательно - ajax
Так же нужно прописывать размеры окон. autoDimensions нужно отключить, иначе при первой загрузке окна размер будет подстроен не адекватно.

Это был скрипт для первого всплывающего окна.

Для последующих срипт будет немного другой:

<script>
$("a#zvonok").fancybox({

'type' : 'ajax',
'width' : 445,
'height' : 300,
'padding' : 15,
'titleShow' : false,
'autoDimensions' : false,
'onComplete' : function(){
$.fancybox.resize();
$.fancybox.center();
}

});
</script>

Сюда добавится та самая команда, которая делает ресайзинг - $.fancybox.resize
и к ней в дагоночку $.fancybox.center

В целом это всё. Один нюанс. Обатите внимание, что если у вас есть форма на главной странице и формы, которые будут отображаться в всплывающих окнах, то их ID должны быть разными, иначе свойства формы, допустим БЕГРАУНД, будут перениматься формами с главной страницы.

И одно НО. Некоторые блоки на главной странице, которые не имеют выравнивания по центру и растягивания по краям, будут смещаться чуть в право из за того, что всплывающие окна и главная страница имеют одинаковый параметр div#container но с разными значениями по ширине. Можно конечно оставить, если вас это не напрягает, потому как блоки возвращаются после закрытия всплывающих окон, а можно в ручную поменять этот div на, допустим, container2. Сделать это можно в самих файлах страниц *.php. Но при следующем обновлении это дело слетит. Поэтому вопрос, как изменить название div#container в самой программе WB?

[Samuel]

я читал эту тему - здесь вообще не понятно как делать и судя потому, что закончилась вопросом - так и не была решена окончательно.
Тем не менее - ларчик просто открывался. Вдруг кому пригодится - открытие сайта в лайтбоксе - у меня так заработало:
width:1100, - здесь подбираете нужную ширину лайтбокса
height:550, - здесь подбираете нужную высоту лайтбокса
centerOnScroll:true,
overlayOpacity:0.8,
overlayColor:'#000'
Прописываем в настройках самого лайтбокса.
Спасибо

[anonimus]

ну так это как бы само собой, что нужно выставить размер в соответствии с размером содержимого лайтбокса и ни для кого не является секретом
но ваш ответ не решает вашей же задачи, так как ларчик автоматически так и не открылся

[anonimus]

Samuel, вставьте в параметры лайтбокса вместо этого:
width:1100,
height:550,

вот этот:

Код: Выделить всё

width:'100%',
height:'100%',

возможно это то, что вам нужно

[Samuel]

То что нужно. Одинарные кавычки - вот в чем была загвоздка..
Хотя и с указанными размерами тоже работает.
Спасибо.

[anonimus]

а ещё лучше сделайте так:

[Samuel]

так даже проще) благодарю

[mehan]

у меня не открывается это изображение. можете перезалить?

[lelik]

А вот у меня вот какая проблема с лайтбоксом на телефоне. Обрезается overlay . Посоветуйте как победить .