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

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

Автор Темы
alexblinov
Читатель
Читатель
Сообщения: 8
Зарегистрирован: 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
Сообщения: 5120
Зарегистрирован: 12 июн 2012, 07:12
Версия Web Builder: 12.0.2
Имя: Анатолий Webmaster
Контактная информация:

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

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

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

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

width: 300,
height: 300

В этом случае саму форму делаем таким же размером,либо размер лайтбокса делаем по размеру формы
**** Аудит ваших проектов (сайтов) на предмет ошибок и различного рода проблем! ****
>>> Ускорение загрузки ваших сайтов >>>
Консультации по WebBuilder, обучение эффективной и главное правильной работе в программе Wysiwig Web Builder.
Решение проблем с вашими проектами, разработка структуры сайта и его функционала, адаптация и оптимизация под мобильные тел и планшеты.
Создание и дизайн сайтов, решение проблем с готовыми сайтами, прочие работы в интернете (домены, хостинг и т.п.)
Оптимизация сайта под продвижение в поисковых системах ( seo )
==============
Skype: onlinebusinesscard.ru
Емаil: mailrobot@wwbmaster.ru
Мои товары в магазине https://market.wysiwygwebbuilder.ru/anonimus.html
==============

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

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

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

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


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

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

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

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

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

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

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

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

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

ekaterina51, отключите в свойствах станицы (Прочее/Лайтбокс) всплывающий увеличитель, ссылка постом выше.

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

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

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

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

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

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

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

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

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

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

По умолчанию в билдере установлен "Всплывающий увеличитель", а показывает "Fancybox", наверно издержки перевода. Перейдите на английскую версию и Вы увидите что реально включено.
В свойствах страницы Прочее сменить "Fancybox" на любой "Лайтбох", жмем "Ok", закрыть, потом открываем свойства станицы заново, выбираем "Fancybox" "Ok".
У вас нет необходимых прав для просмотра вложений в этом сообщении.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ekaterina51, на слоях сделать, открывать через События.

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

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

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

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

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

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

Eric
Продвинутый
Продвинутый
Сообщения: 359
Зарегистрирован: 19 дек 2018, 17:40
Версия 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>
У вас нет необходимых прав для просмотра вложений в этом сообщении.

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

spoon
Эксперт
Эксперт
Сообщения: 1456
Зарегистрирован: 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>
Съешь ещё этих мягких французских булок, да выпей чаю!
Мой skype xmen1005

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

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

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

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

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

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

Eric
Продвинутый
Продвинутый
Сообщения: 359
Зарегистрирован: 19 дек 2018, 17:40
Версия 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>

Надо смотреть. Скиньте страницу отдельно.

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

spoon
Эксперт
Эксперт
Сообщения: 1456
Зарегистрирован: 17 сен 2016, 13:20
Версия Web Builder: 14.2.2
Имя: Дмитрий
Контактная информация:

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

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

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

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

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

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

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

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

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

spoon
Эксперт
Эксперт
Сообщения: 1456
Зарегистрирован: 17 сен 2016, 13:20
Версия Web Builder: 14.2.2
Имя: Дмитрий
Контактная информация:

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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