Как стать автором
Обновить

Комментарии 16

Что такое LightWindow?
Почему LightBox это не модальное окно?
Почему модальное окно не может иметь URL(например, форма авторизации) и занимать 70% экрана(например, показывать лог)?


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

1. Хорошее описание что такое LightWindow — habr.com/ru/post/18748
2. В статье описаны отличия.
3. Модальное окно не подразумеваем отдельный URL ни функционально ни логически.
Если у вас есть примеры таких модальных окон, поделитесь ссылкой.

Хорошо, LightWindow — это конкретный js скрипт, т.е. речь в статье про имя собственное LightBox(https://lokeshdhakar.com/projects/lightbox2/)?


Под модальным окном я понимаю общее определение https://ru.wikipedia.org/wiki/Модальное_окно, которое не описывает взаимосвязь с URL и размером.

Все верно. LightBox — это модальное окно нового поколения, если так проще, замещающее собой внутренние страницы.
По ссылке высланной вами, это типовое применение LightBox, мы же его расширили и это, как написано в статье, по факту LightWindow.

Где-то за 13 лет с появления LightBox, это стало общим названием, как Ксерокс, и называют лайтбоксами чаще всего скрипты которые открывают модальное окно с просмотром картинки или видео с возможностью перехода назад/вперед по списку элементов на странице, вероятно название пошло от лайтбоксов используемых для съемок. Возможность просмотра произвольного контента пришла вместе с распространением ajax, но за долго до появления возможности манипулирования адресами(History API), не долго думая поддержку внедрили в уже существующие решения с лайтбоксами, с этого момента частенько начали использовать скрипты-комбайны для реализации простеньких модальных окон, просто по тому что все лайбоксы реализуют модальные окна. LightBox не новое поколение модальных окон, это вариант использования концепции модальных окон для решения частной задачи.


К сожалению с ходу хороших примеров не нашел, но возьмем для примера utkonos.ru, в списках товаров можно вызвать быстрый просмотр, а на странице товара открыть фото, в случае с фото есть все признаки лайтбокса, при этом скрипты вероятно самописные, а вот как классифицировать предпросмотр товара, переключения нет, скрола нет, занимает небольшую часть экрана, я бы сказал что это просто модальное окно и от того что в нем появится больше контента или я буду использовать меньший экран или разработчики добавят переключение оно не перестанет быть модальным окном.


LightBox как скрипт в сегодняшнем стеке инструментов использовать просто не стоит, особенно не по назначению, кастомизация очень быстро аукнется.

Откуда пошло название не скажу, прижалась.
Про utkonos.ru, и все магазины использующие быстрый просмотре, у них нет отдельного URL, так же они не являются полнофункциональной страницей, способной заменить собой основную карточку товара. LightBox же сейчас эту проблему решает и отрываясь как быстрый просмотре даёт полноценную страницу, которую модно так же закрыть.
На счёт использования не везде согласен, все в дизайне должно быть оправдано. И просто гнаться за трендем не стоит. Но примеры о которых написано в статье, с точки зрения оптимизация пользовательского сценария и облегчения взаимодействия, отлично подошёл LightBox.

Без примеров вашей реализации дальнейшее обсуждение бессмысленно, LightBox(https://lokeshdhakar.com/projects/lightbox2/) поддерживает только картинки, более того, значительная часть кода отвечает за корректное позиционирование, ожидание загрузки картинок итд, нет ничего связанного с работой с URL(History API) и Ajax подгрузкой контента.


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


В любом современном приложении/сайте для качественного исполнения требуется высокая интеграция frontend/backend, никакой скриптик аля LightBox не будет серебряной пулей, особенно когда речь заходит об обработке адресов и подгрузке контента.

Причину название описал в статье.
Примеры так же, в иллюстрациях.
Живое воплощение есть пока в предыдущем проекте Сбербанк Бизнес Онлайн.
Новые примеры, будут к осени, отправлю ссылку как запустим. )


Вы ссылайтесь на понятие LightBox с точки зрения кода, я же с точки зрения UI/UX и его применении. Если удобно это его новое воплощение, не только иллюстрации.
Все же описано в статье.

У нас это называется detail panel
Соглашусь, в свое время в модульбанке использовали схожее решение и оно называлось detail panel, но как я выше написал — у нас в обиходе LightBox. Кроме того LightBox — универсален и может выглядеть и открываться по разному, а detail panel как правило справа на лево и никогда не занимает более 60% экрана.
А можно рассказать подробнее про сценарии использования/неиспользования LightBox. Например, для Интернет-магазина LightBox хорошо подходит, а для корпоративного портала с новостной лентой, LightBox, наверное и не нужен. Какие критерии использования LightBox?
Использование LightBox оправдано в высоко нагруженных сайтах и порталах, при использовании поиска и фильтрации, при необходимости уйти от большего количества страниц и переходов, от ухода в принципе от внутренних страниц. Основная проблематика и идея родилась когда пользователи что-то искали, потом добавляли в фильтр, а потом переходили в карточку или в новость (тут я не вижу разницы), и для возвращения использовали или кнопку в браузере или стрелочку в интерфейсе, либо хлебные крошки. Возвращаясь контекст, фильтр и выдача теряется и пользователю приходилось все начинать с начала. Цель — облегчить жизнь и пользовательский сценарий и уйти от внутренних страниц. 100% в интерфейсе мало кто может уйти от страниц, но все возможно. А новости это, личный кабинет, магазин или что то другое, не имеет значения. Главное в дизайне — все должно быть оправдано. Если бы LightBox, был не оправдан в проектах, его бы не применяли.
Казалось бы, всего то и нужно, чтобы фильтр сохранялся в URL, а выдача в кэше или локальном хранилище. Тогда и переход между страничками работал бы как надо.

Но вы решили не разбираться в том, как работает веб, а просто прилепить ещё один скрипт, открывающий какой-то контент поверх.

Вопрос на засыпку: если эту страницу обновить, когда открыт лайтбокс, подгрузятся ли фильтры и выдача на фоне? Если да, то столько времени будет открываться такая страница?
Вы описали только один кейс и проблематику которую решает LightBox. А на ваш вопрос вы сами можете ответить посмотрев наши продукт и как там работает LightBox.
svoefermerstvo.ru или svoe-rodnoe.ru и еще rshbcoins.ru
На мой взгляд ЛайтБокс не решает никакой проблемы, а только создаёт новые.

Окей, я посмотрел сайт Своё Фермерство и отвечу на свои вопросы, раз вам лень.

Если эту страницу обновить, когда открыт лайтбокс, подгрузятся ли фильтры и выдача на фоне?
Я открыл раздел товары, выбрал сортировку по цене, указал ограничение по цене до 100 000 рублей, и один раз нажал на «Показать ещё 24». После этого открыл карточку товара.

После перезагрузки страницы цена ограничена 259 (не знаю почему), сортировка по цене пропала, отображены только 24 товара, а не 48, прокрутка скинулась на самом начало.

Ну то есть ничего из заявленного вами на деле не работает, если страницу перезагрузить.

Если да, то столько времени будет открываться такая страница?
Такая страница будет открываться 33 секунды на соединении в 15 мегабит в секунду (стандартная скорость для сёл). Общий объём полученных данных 4,9 мегабайта, вместо того, чтобы загрузить только то, что есть в описании товара. Важно понимать, что на фоне загружаются не потенциально нужные нам данные с фильтрацией, а просто какие-то 24 товара, что бог на душу положит.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий