Адаптивный Lightbox с ограничением по ширине и высоте

Вопросы, связанные с адаптивным и мобильным веб-дизайном в WYSIWYG Web Builder.
Правила форума
1. Название темы должно кратко описывать суть вашего вопроса, темы типа: "Помогите", "Почему", "Что это", "Что-то глючит" - будут удаляться.
2. Задавая свой вопрос, постарайтесь предоставить максимум информации о проблеме, если есть возможность, приложите шаблон проекта *.wtp.
Подробнее: Правила создания новых тем и ответов на существующие темы.
Данный форум - это место обсуждения вопроса, а не техподдержка в классическом смысле. Все участники форума Web Builder по-русски с удовольствием вам помогут, если это будет в их силах.
Ответить Вложения 2
Аватара пользователя

Автор Темы
alexblinov
Читатель
Читатель
Сообщения: 17
Зарегистрирован: 06 окт 2017, 00:05
Версия Web Builder: 12.0.3

Адаптивный Lightbox с ограничением по ширине и высоте

Сообщение alexblinov » 03 авг 2020, 12:21

Приветствую.

Как реализовать форму лайтбокса с ограничением по ширине и высоте для компьютеров?

Имеется код:

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

function displaylightbox(url, options)
{
   options.padding = 0;
  options.margin = 0;
  options.height = '90%';
  options.width = '90%';
  options.centerOnScroll = true;
  options.overlayOpacity = 0.8;
   options.autoScale = true;
   options.href = url;
   options.type = 'iframe';
   $.fancybox(options);
}


Требуется задать максимальное ограничение hetght = 400; width = 600;, дабы лайтбокс форма не была столь огромной на стационарных устройствах.

Изображение

Логически пытался добавить в код лайтбокса:

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

  options.MaxWidth = 600;
  options.MaxHeight = 400;


К сожалению не работает)))

поделитесь опытом.

Реклама
Аватара пользователя

anonimus
Moderator
Moderator
Сообщения: 5248
Зарегистрирован: 12 июн 2012, 07:12
Версия Web Builder: 12.0.2
Имя: Анатолий Webmaster
Контактная информация:

Адаптивный Lightbox с ограничением по ширине и высоте

Сообщение anonimus » 03 авг 2020, 14:20

Открыть настройки лайтбокса и прописать следующее (свои размеры):

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

width: 300,
height: 300

В этом случае саму форму делаем таким же размером,либо размер лайтбокса делаем по размеру формы
Подключение формы обратной связи Wysiwyg Web Builder к телеграмму (заявки будут приходить на почту и в телегу, даже с прикреплёнными файлами и картинками)
**** Аудит ваших проектов (сайтов) на предмет ошибок и различного рода проблем! ****
>>> Ускорение загрузки ваших сайтов >>>
Консультации по WebBuilder, обучение эффективной и главное правильной работе в программе Wysiwig Web Builder.
Решение проблем с вашими проектами, разработка структуры сайта и его функционала, адаптация и оптимизация под мобильные тел и планшеты.
Создание и дизайн сайтов, решение проблем с готовыми сайтами, прочие работы в интернете (домены, хостинг и т.п.)
Оптимизация сайта под продвижение в поисковых системах ( seo )
==============
Более подробное описание услуг https://wysiwygwebbuilder.ru/forum/viewtopic.php?f=54&t=975
Емаil: mailrobot@wwbmaster.ru
Telegram: HTMLPLUSRU
==============

Аватара пользователя

Eric
Продвинутый
Продвинутый
Сообщения: 381
Зарегистрирован: 19 дек 2018, 17:40
1
Версия Web Builder: 14.2.2
Имя: Дмитрий
Контактная информация:
Пользователь заблокирован

Адаптивный Lightbox с ограничением по ширине и высоте

Сообщение Eric » 03 авг 2020, 20:13

Заходим, смотрим, покупаем не дорого, не стесняемся. Заходим, смотрим, покупаем, не стесняемся... :)
https://wwb.art-studio.top

Аватара пользователя

ekaterina51
Интересующийся
Интересующийся
Сообщения: 29
Зарегистрирован: 11 фев 2020, 22:44
Версия Web Builder: 14.2.2

Адаптивный Lightbox с ограничением по ширине и высоте

Сообщение ekaterina51 » 20 мар 2021, 11:58

Здравствуйте! Подскажите, пожалуйста как открыть ютуб видео в отдельном окне? Ставлю галочку "Открывать в лайтбоксе', а видео открывается на весь экран

Аватара пользователя

Eric
Продвинутый
Продвинутый
Сообщения: 381
Зарегистрирован: 19 дек 2018, 17:40
1
Версия Web Builder: 14.2.2
Имя: Дмитрий
Контактная информация:
Пользователь заблокирован

Адаптивный Lightbox с ограничением по ширине и высоте

Сообщение Eric » 20 мар 2021, 23:23

ekaterina51, отключите в свойствах станицы (Прочее/Лайтбокс) всплывающий увеличитель, ссылка постом выше.
Заходим, смотрим, покупаем не дорого, не стесняемся. Заходим, смотрим, покупаем, не стесняемся... :)
https://wwb.art-studio.top

Аватара пользователя

ekaterina51
Интересующийся
Интересующийся
Сообщения: 29
Зарегистрирован: 11 фев 2020, 22:44
Версия Web Builder: 14.2.2

Адаптивный Lightbox с ограничением по ширине и высоте

Сообщение ekaterina51 » 21 мар 2021, 11:45

Спасибо! Но всплывающий увеличитель и не был включен. Проверила и так и так, все равно во весь экран

Аватара пользователя

Eric
Продвинутый
Продвинутый
Сообщения: 381
Зарегистрирован: 19 дек 2018, 17:40
1
Версия Web Builder: 14.2.2
Имя: Дмитрий
Контактная информация:
Пользователь заблокирован

Адаптивный Lightbox с ограничением по ширине и высоте

Сообщение Eric » 21 мар 2021, 17:06

ekaterina51, в том и проблема, что он как-бы выключен, но это как-бы, а в реальности все наоборот.

По умолчанию в билдере установлен "Всплывающий увеличитель", а показывает "Fancybox", наверно издержки перевода. Перейдите на английскую версию и Вы увидите что реально включено.
В свойствах страницы Прочее сменить "Fancybox" на любой "Лайтбох", жмем "Ok", закрыть, потом открываем свойства станицы заново, выбираем "Fancybox" "Ok".
У вас нет необходимых прав для просмотра вложений в этом сообщении.
Заходим, смотрим, покупаем не дорого, не стесняемся. Заходим, смотрим, покупаем, не стесняемся... :)
https://wwb.art-studio.top

Аватара пользователя

ekaterina51
Интересующийся
Интересующийся
Сообщения: 29
Зарегистрирован: 11 фев 2020, 22:44
Версия Web Builder: 14.2.2

Адаптивный Lightbox с ограничением по ширине и высоте

Сообщение ekaterina51 » 21 мар 2021, 22:22

Eric Спасибо огромное!

Аватара пользователя

ekaterina51
Интересующийся
Интересующийся
Сообщения: 29
Зарегистрирован: 11 фев 2020, 22:44
Версия Web Builder: 14.2.2

Адаптивный Lightbox с ограничением по ширине и высоте

Сообщение ekaterina51 » 23 мар 2021, 09:36

Eric, еще раз спасибо! Видео открывается в лайтбоксе всё Ок, но не открывается во весь экран, хотя галочка стоит. Как можно исправить? Спасибо!

Аватара пользователя

Eric
Продвинутый
Продвинутый
Сообщения: 381
Зарегистрирован: 19 дек 2018, 17:40
1
Версия Web Builder: 14.2.2
Имя: Дмитрий
Контактная информация:
Пользователь заблокирован

Адаптивный Lightbox с ограничением по ширине и высоте

Сообщение Eric » 23 мар 2021, 21:45

ekaterina51, на слоях сделать, открывать через События.
Заходим, смотрим, покупаем не дорого, не стесняемся. Заходим, смотрим, покупаем, не стесняемся... :)
https://wwb.art-studio.top

Аватара пользователя

ekaterina51
Интересующийся
Интересующийся
Сообщения: 29
Зарегистрирован: 11 фев 2020, 22:44
Версия Web Builder: 14.2.2

Адаптивный Lightbox с ограничением по ширине и высоте

Сообщение ekaterina51 » 24 мар 2021, 00:23

Спасибо! Все ОК! Но когда закрываю слой, при этом не останавливаю видео, звук продолжает идти

Аватара пользователя

Eric
Продвинутый
Продвинутый
Сообщения: 381
Зарегистрирован: 19 дек 2018, 17:40
1
Версия Web Builder: 14.2.2
Имя: Дмитрий
Контактная информация:
Пользователь заблокирован

Адаптивный Lightbox с ограничением по ширине и высоте

Сообщение Eric » 24 мар 2021, 02:06

ekaterina51, Для page_layer.html попробуйте добавить HTML вставку "Между тегами <head></head>", или исходнике кнопки "Перед тегом".

#Shape1 или #wb_Shape1 // ID кнопки закрыть
#YouTube1 // соответственно YouTube
autoplay=0 // 0 выкл, 1 запустить

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

<script>
$(document).on('click', '#Shape1', function() {
   var $video = $('#YouTube1'),
      src = $video.attr('src');
 
   $video.attr('src', src + '&autoplay=0');
});
</script>
У вас нет необходимых прав для просмотра вложений в этом сообщении.
Заходим, смотрим, покупаем не дорого, не стесняемся. Заходим, смотрим, покупаем, не стесняемся... :)
https://wwb.art-studio.top

Аватара пользователя

spoon
Помешаный
Помешаный
Сообщения: 1614
Зарегистрирован: 17 сен 2016, 13:20
Версия Web Builder: 14.2.2
Имя: Дмитрий

Адаптивный Lightbox с ограничением по ширине и высоте

Сообщение spoon » 24 мар 2021, 07:10

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

<script>
$('#Shape1').on('click', function() {
$('#YouTube1').attr('src', ( index, value )=>`${value&autoplay=0}`);
});
</script>
Съешь ещё этих мягких французских булок, да выпей чаю!
Телега

Аватара пользователя

ekaterina51
Интересующийся
Интересующийся
Сообщения: 29
Зарегистрирован: 11 фев 2020, 22:44
Версия Web Builder: 14.2.2

Адаптивный Lightbox с ограничением по ширине и высоте

Сообщение ekaterina51 » 26 мар 2021, 16:19

Eric Ничего не получается! Закрываю слой, а звук остается. Хотя все сделано как у вас в проекте

Аватара пользователя

Eric
Продвинутый
Продвинутый
Сообщения: 381
Зарегистрирован: 19 дек 2018, 17:40
1
Версия Web Builder: 14.2.2
Имя: Дмитрий
Контактная информация:
Пользователь заблокирован

Адаптивный Lightbox с ограничением по ширине и высоте

Сообщение Eric » 26 мар 2021, 19:58

Посмотрите в исходнике страницы jquery подключен. Если нет, то через Источник файлов, папку js сделайте и jquery-(версия).min.js в нее поместите. Из папки можно взять C:\Program Files (x86)\WYSIWYG Web Builder 16\js.
И между тегами <head></head> вставить

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

<script src="js/jquery-(версия).min.js"></script>

Надо смотреть. Скиньте страницу отдельно.
Заходим, смотрим, покупаем не дорого, не стесняемся. Заходим, смотрим, покупаем, не стесняемся... :)
https://wwb.art-studio.top

Аватара пользователя

spoon
Помешаный
Помешаный
Сообщения: 1614
Зарегистрирован: 17 сен 2016, 13:20
Версия Web Builder: 14.2.2
Имя: Дмитрий

Адаптивный Lightbox с ограничением по ширине и высоте

Сообщение spoon » 26 мар 2021, 20:03

ekaterina51, скиньте проект
Съешь ещё этих мягких французских булок, да выпей чаю!
Телега

Аватара пользователя

ekaterina51
Интересующийся
Интересующийся
Сообщения: 29
Зарегистрирован: 11 фев 2020, 22:44
Версия Web Builder: 14.2.2

Адаптивный Lightbox с ограничением по ширине и высоте

Сообщение ekaterina51 » 26 мар 2021, 22:39

spoon, скинула вам в личку

Аватара пользователя

spoon
Помешаный
Помешаный
Сообщения: 1614
Зарегистрирован: 17 сен 2016, 13:20
Версия Web Builder: 14.2.2
Имя: Дмитрий

Адаптивный Lightbox с ограничением по ширине и высоте

Сообщение spoon » 29 мар 2021, 06:41

ekaterina51, немного поковырялся, дело в том, что при скрытии он не выключается продолжает работать, соответственно звук ни куда не девается.
Съешь ещё этих мягких французских булок, да выпей чаю!
Телега

Аватара пользователя

Korban
Экспериментатор
Экспериментатор
Сообщения: 77
Зарегистрирован: 25 авг 2013, 22:38
Версия Web Builder: 11.0.5

Адаптивный Lightbox с ограничением по ширине и высоте

Сообщение Korban » 03 апр 2021, 21:19

Подскажите,
как в разных точках останова сделать разные лайтбоксы?

у меня html5 видео и я хочу чтобы, например, на т.320 лайтбокс был не 640х385 ,а скажем 320х180, но когда меняю - меняется на всех точках

Аватара пользователя

Korban
Экспериментатор
Экспериментатор
Сообщения: 77
Зарегистрирован: 25 авг 2013, 22:38
Версия Web Builder: 11.0.5

Адаптивный Lightbox с ограничением по ширине и высоте

Сообщение Korban » 04 апр 2021, 00:26

блин, показывал лайтбокс норм, пока не начал переключать на фансибокс и обратно как советовал Eric, - теперь ютюб в лайтобксе не показывает (открывается на весь экран), а html mediaplayer вообще не фурычит...
что делать как думаете?


Ответить Вложения 2

Вернуться в «Адаптивный и мобильный веб-дизайн.»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость