Лайтбокс на сайте что это
Что такое лайтбоксы?
Одно из самых популярных направлений в веб-дизайне, появившееся за последние несколько лет создание сайтов, которые выглядят скорее как автономные приложения, чем традиционные сайты более ранней эпохи. Целью этих сайтов является использование передовых языков дизайна, таких как CSS3, HTML5 и JavaScript, для создания сайта, который может открывать окна, предоставляя новую информацию без обновления страницы, и приводить пользователя конца к цели с меньшим количеством отвлечений и меньшей путаницей.
Одним из ключевых инструментов в этом является лайтбокс. Иногда называемый «модальное окно» или «модальный диалог». Эти всплывающие окна изменили способ, которым посетители взаимодействуют с фотографиями, регистрационными формами, комментариями в блогах или продукцией, описанной в интернет-магазине.
Грамотная модернизация компьютера Киев, проведенная опытными специалистами, позволит существенно увеличить производительность вашего настольного ПК или старенького ноутбука, существенно снизив расходы на это.
Без сомнения, большинство людей, вероятно, уже видели лайтбокс в действии. Эти окна используются, возможно, даже слишком часто, когда просят клиентов или читателей блога высказать свое мнение о содержании сайта, дизайне или общей функциональности. В других случаях они используются, чтобы увеличить фото на блоге или в интернет-магазин, не открывая новую страницу или не инициируя обновления страницы. Фото просто загружается в полном размере во всплывающем окне. Некоторые сайты используют лайтбокс, для добавления продуктов в корзину покупок, не идя на сайт или страницу этого продукта.
Почему они называются «лайтбоксы», довольно ясно. Эти окна предназначены для устранения обновления страницы, представляя очень маленький объём информации в окне, которое появляется в верхней части существующего контента сайта, действуя наподобие ссылки, но никакого перехода при этом, конечно не происходит. При клике картинка становится полноразмерной. Для облегчения восприятия, они часто размывают или затемняют фон, так что акцент ложится исключительно на функции этого всплывающего окна.
Дизайнеры используют комбинацию CSS и JavaScript библиотек, чтобы сделать этот эффект реальности. Почти во всех случаях, лайтбокс просто вторичная веб-страница, с кодом JavaScript, загружаемая поверх существующей страницы, а не заставляющая посетителя перейти на эту страницу отдельно.
Такие элементы отлично смотрятся на мобильных устройствах, в т.ч. на iPhone и iPad. Если такое устройство у вас вышло из строя — обратитесь в сервисный центр Анлокпро — там помогут решить эту проблему.
LightBox с точки зрения UX/UI и как он меняет продукты
В Экосистеме РСХБ мы создаем инновационные продукты для сельского хозяйства.
Для их разработки мы решили использовать подход мировых компаний в области UX/UI.
Чтобы не повторять ошибки конкурентов и создать полноценную экосистему.
Основой всех продуктов экосистемы стал LightBox, который является сквозным функциональным дизайн-решением. Например, в проекте для фермеров, мы решаем насущные проблемы и вопросы фермера в одном окне и кроме маркетплейса товаров предоставляем большое число услуг
и сервисов.
Сложность проекта заключается в объединении в одном портале разных сценариев и ролей.
Что такое LightBox и почему именно «LightBox», а не «LightWindow», в чем его отличие от Pop-up, как он способен изменить продукт. Все это я постараюсь рассказать ниже.
1 — С точки зрения разработки LightBox представляет собой всплывающее окно с изображением.
2 — Pop-up или модальное окно, представляет собой всплывающее окно с минимальным набором функционала не имеющего отдельного URL. Его основная задача информировать пользователя, спрашивать и уточнять, предупреждать, открывать просмотр и медиа контента.
3 — Модальные окна занимают, как правило, менее 30% экрана. LightBox — это уже полноценная страница, с полноценным функционалом и имеющая отдельный URL и площадью покрытия от 70% до 90%.
4 — Почему мы считаем данное решение ключевым и важным для UХ и UI большинства продуктов?
Все просто. Все интерфейсы и дизайн решения имеют несколько целей и единый путь развития. Все меняется и имеет цикличность, так вот — если углубиться в историю первых интерфейсных решений, то все они были основаны на LightWindows, это были функциональные всплывающие окна. Сейчас же весь дизайн стремится к максимальному удобству, оптимизации времени и минимализму одного окна.
Идеальный продуктовый интерфейс — это одно окно.
Почему сейчас все больше продуктов используют осознанно или нет LightBox, и почему раньше они этого не делали. Пользователи не были готовы к кардинальным переменам, технологии не достигли соответствующего уровня.
Почему мы стали применять LightBox, расскажу на одном примере ниже.
Пользователь находится на портале, ищет необходимый товар или услугу, через поиск, получает страницу выдачи, добавляет фильтры и дополнительные критерии. Находит нужный товар, нажимает на карточку, совершает покупку, закрывает через браузер или «хлебные крошки», переходит на страницу списка, теряя контекст, фильтры и поиск который он делал ранее.
Это порядка 7-10минут, а в сложных продуктах и более 25минут.
Человек теряет время, теряет контекст и начинает свой путь заново.
LightBox, помогает решить проблему потери контекста, фильтров, поиска и выдачи. Это страница с уникальным URL (всегда можно отследить переход на нее и поделиться ссылкой), открывается поверх страницы выдачи и позволяет вернуться в тот же экран откуда пользователь ушел. При тестировании данной технологии на пользователях еще на стадии прототипов и макетов 100 из 100 пользователей положительно оценили такое решение.
Так же при большом количестве схожих продуктов или услуг, LightBox позволяет пользователю перелистывать страницу не закрывая ее.
Преимущества LightBox:
— Уникальный URL
— Полноценная страница с сохранением функционала
— Сохранение контекста
— Интуитивность
— Свобода реализации и дизайна
— 70%-90% рабочего пространства с возможностью отображать интерфейс в полном объеме
— Возможность блочного построения и интеграции внедренного скролла.
Экосистема для фермеров (Своё | Фермерство)
Как в реальных проектах работает LightBox и каковы его преимущества.
Во первых, время работы и переходов сокращается в среднем с 10 минут до 1 минуты.
Во вторых, общее время и скорость взаимодействия до конечного действия, сокращается вдвое.
Фермеры и пользователи положительно оценили это решение и мы стремимся к работе в одном окне.
Меня зовут Кирилл Тагинцев, я возглавляю UI/UX экосистемы РСХБ, мы разрабатываем проекты и применяем LightBox в своих проектах. В статье представлены лишь часть из них.
В одном из последних продуктов, для которого применялось данное решение, по рейтинг markswebb, заняло 1-е место, и LightBox был решающим с точки зрения удобства пользовательского взаимодействия.
Новостной портал, с социальными блогами для фермеров (Новости и Блоги)
Портал поиска сотрудников и работы в агро направлении (Подбор персонала)
14 Плагинов для эффекта Lightbox на сайте WordPress
Вступление
В этой статье я сделал обзор 14 Плагинов для эффекта Lightbox на сайте WordPress, протестированных для эффекта Lightbox (лайтбокс) на сайте WordPress. Лайтбокс это эффект для фотоснимка, при котором показ фото на веб-странице осуществляется в модальном окне при нажатии на фото.
В модальном окне фотография увеличивается до размера оригинала. В то же время другая часть страницы (фон) затухает, «экран выключается». Это дает посетителям сайта возможность взглянуть на изображение с близкого расстояния, не покидая страницы. Для для эффекта Lightbox на сайте WordPress используются библиотеки JavaScript : jQuery, MooTools.
Lightbox JS v2.0
Lightbox Plus ColorBox
Плагин Lightbox Plus представляет собой плагин, который реализует метод Lightbox JS по Lokesh Dhakar (см. выше). Lightbox Plus используется для создания наложения изображений на экране веб-страницы и автоматически добавляет правильные ссылки на наложенное изображение. Lightbox Plus может добавлять в лайтбокс WordPress галереи изображений, отображать простые слайд-шоу, видео, формы и внешнее содержимое (тексты) во всплывающих накладках. Задняя страница затемняется темным или светлым фоном, так называемый эффект «погасить страницу».
Lightbox Gone Wild!
Еще одна авторская реализация идей Lokesh Dhakar. Это не плагин, а скорее урок по JavaScript и CSS для вставки фото в сайт WordPress.
Lightbox
Leightbox простой плагин для создания модальных окон для текстов, НЕ обновлялся более 2-х лет.
SmoothGallery
Плагин SmoothGallery использующий библиотеку MooTools v1.11, галереи JavaScript и слайд-шоу. Система позволяет делать простую и с затемнением (гладкую) галерею изображений, слайд-шоу, витрины и т.п. на сайте WordPress. Галереи добавляются к записи при помощи шорткодов плагина. НЕ обновлялся более 2-х лет.
Lightbox Pop
Плагин Light Pop позволяет создать всплывающие окна лайтбокс с нужным вам содержанием. Вы можете настроить всплывающее окно при помощи настроек высоты, ширины, сверху, слева. Также настраивается логика отображения параметров : время задержки после загрузки страницы, количество страниц для просмотра, интервал повтора лайтбокс. Есть настройки стиля: Z- индекс, наложение прозрачности, цвет границы и т.д.
FancyBox fo WordPress
Плагин FancyBox легко интегрируется в блог. Достаточно его загрузить, активировать и все готово. Дополнительные конфигурации необязательны. Вы можете легко настроить практически все, что приходит на ум: границы, ширина и цвет границ, скорость трансфокации, тип анимации кнопки закрытия, наложение цвета и прозрачности фона и даже более продвинутый вариант, как несколько вариантов группы изображений в галереи.
Shutter Reloaded
Shutter Reloaded плагин просмотра изображений для сайта WordPress. Работает аналогично Lightbox, Thickbox и т.д., но занимает всего лишь 10 Kb и не требует никаких внешних библиотек. Cleaner Gallery имеет много настроек: изменение размеров изображений, комбинирования изображений в галереях, перерисовки окна после изменения размера, предварительная загрузка соседнего изображения для более быстрого отображения. Плагин совместим с основными браузерами, имеет настройки цвета, прозрачности фона и цвет текста заголовка, меняемый текст кнопки и фон меню. НЕ обновлялся более 2-х лет.
jQuery Lightbox
Просто скачайте плагин jQuery Lightbox, распакуйте файлы в папку wp-content\plugins и активируйте плагин в настройках WordPress.
Теперь, каждый раз, когда вы хотите использовать эффект лайтбокс, поместите ссылку на изображение, чтобы сделать изображение кликабельным. Добавьте к ссылке атрибут rel=”lightbox”, для того, чтобы активировать эффект лайтбокс при нажатии на фото. Кроме одного фото, вы можете использовать атрибут rel=”lightbox-album” для группы фотографий. Для этого замените [album] в атрибуте на любое ключевое слово, которое применено к группе нескольких фотографий в альбоме!
WP Lightbox JQuery
Плагин WP Lightbox JQuery использует библиотеку JavaScript – jQuery для эффекта Lightbox на сайте WordPress. Основан плагин на плагине Lightbox2, но значительно дополнен. Основные функции для работы: обеспечение поддержки локализации, админ-панель для настройки. Дополнительно: авто-бокс вашей ссылки на изображения и поддержка галереи WordPress, в том числе медиа-библиотеки названий и подписей.
WP Lightbox 2
Плагин WP Lightbox для добавления эффекта наложения лайтбокс к текущей странице на вашем блоге WordPress. Просто установите и сидите « сложа руки». Этот плагин установит lighbox наложение для всех изображение всех постов вашего WordPress. Настроек не требует.
Simple Lightbox
Simple Lightbox это бесплатный плагин для WordPress, который позволяет добавить очень простой и настраиваемый лайтбокс изображения на основе библиотеки Javascript – всплывающее окно на вашем сайте WordPress. Плагин поддерживает различные шаблоны показа фото, которые позволяют лучше интегрировать фото с темой вашего сайта.
Easy Fancybox
Плагин Easy FancyBox поддерживает:
FancyBox
Плагин FancyBox для добавления эффекта Lightbox на сайте WordPress. Немного сложная вставка ссылок, требуется ручное прописывание кодов. В остальном нет проблем и все работает для форматов BMP, GIF, JPG, JPEG, PNG и ссылок на тексты.
Fancy Gallery
Плагин Fancy Gallery. Поддержка эффекта Lightbox на сайте WordPress для всех связанных фотографий сайта. Поддержка галерей. Управление галереями независимо от статей, таксономия для фото. Необычные эффекты галерей только в версии Pro.
Лайтбокс Modal
Лайтбокс — это эмуляция модального диалогового окна, появляющегося поверх основного содержимого страницы в ответ на действия пользователя.
Лайтбокс (от англ. lightbox) — источник света большой площади. Излучает максимально ровный свет, равный по яркости по всей их поверхности.
Используется в виде носителей рекламы, в фотографии для просмотра отснятых слайдов, в медицине для просмотра МРТ- и рентгеновских снимков.
Когда использовать
В лайтбокс нужно выносить второстепенное содержимое страниц, которое требуется только в некоторых случаях. Как правило, это настройки, создание новых документов, заполнение небольших форм, пошаговый мастер. Например, для ввода адреса — при клике по ссылке открывается лайтбокс.
Не используйте лайтбокс для больших форм. Если важно оставить контекст страницы для большой формы, возможно вам подойдет сайдпейдж.
Описание работы
Лайтбокс появляется поверх страницы, затемняя ее. Это помогает сфокусировать внимание пользователя на конкретных действиях, не теряя при этом общий контекст.
Содержание
Лайтбокс может состоять из:
Ни один из этих пунктов, кроме крестика, не является обязательным.
Заголовок
Если лайтбокс предназначен для выполнения одной конкретной задачи, она должна быть отражена в заголовке. Заголовок должен быть кратким (1-3 слова) и являться названием процесса или объекта.
Если лайтбокс носит информационный характер, заголовок должен емко передавать суть сообщения:
В лайтбоксах-подтверждениях заголовком является вопрос:
Действия
Чаще всего в лайтбоксе есть минимум два терминальных (закрывающих лайтбокс) действия:
Кнопки и ссылки расположены на специальной плашке слева направо: чем правее — тем менее важное и менее частотное действие. Плашка делает кнопки более заметными и позволяет лучше ориентироваться в интерфейсе. Рекомендуем использовать такие плашки и в обычных формах.
Закрытие лайтбокса
В правом верхнем углу лайтбокса всегда должна быть кнопка закрытия в виде крестика. Действие кнопки аналогично действию ссылки «Отменить». Также лайтбокс должен закрываться по нажатию клавиши Escape на клавиатуре.
Лайтбоксы, содержащие формы или другие контролы, позволяющие внести изменения, не должны закрываться при клике за пределами лайтбокса. Иначе, случайный клик может привести к потере введеных данных.
Лайтбоксы, несущие чисто информационную функцию, могут закрываться при клике за пределами лайтбокса.
Если было изменение данных, всегда уточняйте у пользователя перед закрытием лайтбокса — сохранить данные или уйти без сохранения.
Не делайте лайтбоксы исчезающие по таймауту, есть вероятность, что пользователь не увидит их, или не успеет разобрать, что было написано в этом лайтбоксе.
Размер и расположение
По горизонтали лайтбокс позиционируется по центру. По вертикали — по центру и на 10% смещенным к верхней части окна браузера.
Если размер лайтбокса по вертикали приближается к размеру окна браузера, чтобы лайтбокс не прилип к верней границе, он позиционируется с отступом 40 px от верхнего края.
Размер лайтбокса должен соответствовать его содержимому — внутри лайтбокса не должно быть пустых областей. В то же время, если контент требует большого экранного пространства (например, интерактивная карта) — лайтбокс должен иметь максимально возможный размер.
В случае, если высота лайтбокса при работе с ним может сильно меняться, такой лайтбокс лучше располагать с фиксированным отступом от верхней границы экрана, чтобы, например, при переключении между вкладками, окно не меняло свое положение.
Прокрутка
Избегайте ситуаций, когда лайтбокс становится настолько большим, что перестает помещаться по высоте на экран с минимально поддерживаемым разрешением. Подумайте над тем, чтобы вместо такого лайтбокса сделать отдельную страницу или сайдпейдж.
Если лайтбокс не входит по высоте в окно браузера, при открытии он позиционируется с отступом 40 px от верхнего края страницы. Полоса прокрутки должна появляться у всей страницы, а не внутри лайтбокса. Контент страницы под затемнением не должен скроллиться.
После прокрутки до нижнего края лайтбокс позиционируется с отступом 40 px от нижнего края страницы.
Залипающие панели
Если важно чтобы в любом положении прокрутки были доступны элементы управления лайтбоксом в футере, или был виден заголовок, заголовок и футер могут залипать. При этом лайтбокс так же открывается с отступом от верхнего края окна браузера, и прокручивается до появления отступа снизу.
Выбор режима в котором работает лайтбокс — с залипаниями или в обычном, и то, какие части должны залипать остается на усмотрение дизайнера.
Следите за тем, чтобы контент страницы или лайтбокс не скакали при открытии и закрытии лайтбокса, или открытии новых лайтбоксов. Такое случается при появлении или исчезновении полосы прокрутки — с полосой прокрутки страница становится у́же.
Наложение лайтбоксов
Если нужно вызвать из лайтбокса еще один лайтбокс, при открытии нового лайтбокса затемнение не должно множиться. Затемнение должно быть одно, все открытые ранее лайтбоксы должны быть помещены под него.
Это исключительный случай, старайтесь избегать вложенности лайтбоксов.
Фокус и работа с клавиатурой
Если лайтбокс содержит поля ввода, при открытии лайтбокса ставьте фокус в первое поле автоматически.
Если это поле заполнено, и с большой вероятностью будет изменено, можно выделить значение, чтобы при вводе первого символа старое значение было стерто.
При открытом лайтбоксе нажатие Tab не переводит фокус на элементы страницы, фокус переходит только по элементам лайтбокса включая крестик.
Клавиша Esc закрывает лайтбокс.
Дизайн, размеры и отступы
Лайтбокс с терминальной плашкой:
Дополнительные кнопки и ссылки в терминальной плашке:
Лайтбокс без терминальной плашки:
Нельзя использовать лайтбокс без терминальной плашки, если в нем присутствуют поля не выровненные по левому краю, или текст выровненный по центру:
Лайтбокс без заголовка:
Если лайтбокс не содержит контента, не следует использовать терминальную плашку:
Информационный лайтбокс — лайтбокс без кнопок:
Создание лайтбокса для сенсорного интерфейса на HTML5
Stephen Woods, фронтэнд-инженер в Flickr, объясняет, как создать простой лайтбокс с поддержкой жестов и дает советы для улучшения восприятия и производительности сенсорных интерфейсов.
Необходимые знания: средний уровень CSS, средний-продвинутый уровень JavaScript
Требования: Android или IOS устройство
Временные затраты: 2-3 часа
Скачать исходники
Просмотр демонстрации
Лайтбокс-виджеты стали стандартными в сети, с тех пор, как первая версия lightbox.js была выпущена в 2005 году. Лайтбокс создает модальное диалоговое окно для того, чтобы просмотреть увеличенные изображения, обычно с кнопками «Следующий» и «Предыдущий», чтобы перемещаться между слайдами.
Начиная с бума в использовании сенсорных устройств, веб-сайты обновили лайтбоксы, чтобы поддерживать взаимодействие жестов с различными степенями успеха. В этом учебном руководстве я собираюсь показать, как создать простой лайтбокс с поддержкой жестов. В процессе вы узнаете немного об улучшении воспринимаемой производительности сенсорных интерфейсов, а также несколько простых приемов для улучшения фактической производительности.
Запись кода для сенсорных устройств существенно отличается от записи кода для десктопов. Вы можете (и должны) объединять как можно больше кода с десктопным, но между ними всегда будут значительные различия.
Сравнительные тесты показывают, что наиболее распространенные сенсорные устройства сопоставимы по производительности с настольными компьютерами приблизительно 1998 года. У них обычно около 256 МБ RAM, производительности ЦП наравне с оригинальным iMac. Методы, которые мы используем, чтобы «просто работал» на десктопе, не будут корректно работать на мобильных телефонах и планшетах. К нашему счастью, эти устройства обычно хорошо оптимизированы для графики, особенно для перемещения элементов на экране. Устройства iOS и Android 3.0+ имеют аппаратное ускорение графики.
Фактически, вы можете представить эти устройства, как дрянные компьютеры с приличными видеокартами.
Мы взаимодействовали с нашими компьютерами одним и тем же способом в течение прошлых 20 лет. Мы перемещаем указатель мыши и щелкаем по кнопкам управления. Кнопки, блоки закрытия, ссылки и полосы прокрутки — вторая природа для пользователей и разработчиков. Сенсорные интерфейсы представляют совершенно другой набор соглашений. Один из наиболее распространенных — «скольжение (swipe)». При «скольжении» несколько элементов представлены, как будто они идут подряд, и пользователь может использовать «скользящий» жест, чтобы перемещаться между ними.
Скольжение является таким общим шаблоном, что мы даже не должны говорить пользователям об этом — когда пользователь видит что-то похожее на список, он инстинктивно попытается его пролистать.
Часто мы не можем заставить наш код работать немного быстрее, особенно когда мы имеем дело с медленными соединениями и медленными устройствами. Но мы можем заставить интерфейс казаться быстрее, фокусируясь на оптимизациях восприятия.
Мой любимый пример оптимизации воспринимаемой производительности — TiVo. Тринадцать лет назад, когда появились первые TiVo, они были невероятно медленными (16 МБ RAM и ЦП на 54 МГц!). Могло потребоваться мучительно много времени, пока что-то произойдет после того, как что-то нажали на пульте, особенно если начинали проигрывать или записывать что-то. Однако, никто никогда не жаловался на то, что TiVo медленный. По-моему, это из-за звука. Самая знакомая часть интерфейса TiVo — мелодия, которая звучала после того, как нажимаете любую кнопку. Тот звук играл моментально. Инженеры в TiVo сделали так, чтобы звук загружался как можно быстрее, чтобы независимо от того, что произойдет дальше, пользователь знал, что интерфейс не умер. Эта короткая мелодия говорила пользователям, что их запрос услышали.
В сети мы разработали соглашение, которое делает такую же вещь: загрузчик (spinner). После клика сразу появляется спиннер и таким образом, пользователь получает сообщение, что его услышали. В мобильных телефонах мы должны делать иначе.
Жесты — не дискретные действия, как щелчки. Однако, чтобы заставить интерфейс казаться быстрым, мы должны дать пользователям некоторую обратную связь. Поскольку они жестикулируют, мы перемещаем интерфейс в некотором роде так, чтобы они знали, что мы «слышим» их.
Инструменты
Быстро реагирующие интерфейсы требуют, чтобы элементы двигались как можно быстрее. Движением мы показываем пользователю, что интерфейс отвечает на их запрос. Использование JavaScript-анимации для этого слишком медленное. Вместо этого мы используем CSS-трансформации и переходы: трансформации для производительности, а переходы — чтобы анимация могла работать, без блокировки выполнения JavaScript.
В этом уроке, для всех движений и анимаций, я буду использовать CSS-трансформации и переходы.
Другая оптимизация, которую я хочу использовать как можно больше, является, как я называю «write-only DOM». Чтение свойств и значений из DOM сложное и обычно ненужное. Для лайтбокса я попытаюсь объединить все считывания в фазе инициализации. После этого я буду поддерживать состояние в JavaScript и при необходимости делать простую арифметику.
Создание лайтбокса
Для этого урока мы создадим страницу с несколькими миниатюрами. Щелчок (или касание пальцем) на миниатюрах запустят лайтбокс. После этого в лайтбоксе, пользователь сможет пролистывать пальцем изображения, а потом коснуться изображения, чтобы выйти из лайтбокса.
При создании интерфейса для жестов, осознавайте важность воспринимаемой производительности. В лайтбоксе это означает что слайды должны двигаться из-за скольжения пальца по экрану. Когда пользователь прекращает жестикулировать, слайды должны перейти в следующую позицию, или вернуться в предыдущую, если не хватило длины скольжения.
Анимация возврата критически важна. Благодаря ей пользователь никогда не подумает, что интерфейс мертв.
Начало
Создадим следующие файлы:
lightbox/
reset.css
slides.css
slides.html
slides.js
Шаблон
HTML будет простым. Это не только ради демонстрационного примера. Сложное дерево DOM по определению медленнее. Стили, извлечение DOM элемента и визульные эффекты все более тяжелый с более сложным деревом DOM. Поскольку мы нацелены на «дрянные компьютеры», каждый бит на счету, поэтому важно делать все простым с самого начала.
Я использую reset.css от Eric Meyer, чтобы начать обнулить CSS. Также я настраиваю область просмотра так, чтобы она не масштабировалась.
Я отключил родной «клик для изменения масштаба», чтобы он не вмешивался в жесты. Корректная реакция на клик будет реализована в JavaScript. «Клик для изменения масштаба» заслуживает отдельного урока, поэтому мы опустим его сейчас.
На стороне JS я использую zepto.js, очень легкую платформу с jQuery-синтаксисом. На самом деле нет необходимости ни в какой платформе, но эта немного ускорит работу над некоторыми задачами. Для фактических жестовых взаимодействий мы будем использовать встроенные API.
Стилизация миниатюр
Теперь добавим маленькие симпатичные миниатюры и некоторые другие визуальные эффекты:
Основной лайтбокс
Служебные функции
Вместо того, чтобы прописывать снова и снова «-webkit-transform» и «translate3d», я создам несколько служебных функций, чтобы они выполняли эту работу за меня.
Наш виджет лайтбокса будет инициализироваться при загрузке страницы, чтобы ускорить процессы. Инициализация заключается в нахождении всех миниатюр на странице и создании модели данных. Мы будем ждать, когда лайтбокс будет предоставлен для создания HTML и присоединим обработчики событий.
Инициализация
Для лайтбокса я использую конструктор, который берет селектор блока в качестве его единственного параметра.
Функция «init» захватывает все теги «li», находит миниатюры и записывает информацию в массив «slideData». В то же время я создаю объект «slideMap», который отображает «href» миниатюры в массиве «slideData». Это позволяет мне быстро искать данные по щелчку, без необходимости циклично пропускать все данные в массиве или украшать DOM дополнительной информацией.
Остальная инициализация происходит в методе «show».
Создание оболочки
Функция «buildChrome» создает HTML-оболочку для лайтбокса и затем устанавливает семафор так, чтобы оболочка не перестраивалась каждый раз, когда пользователь скрывает или показывает лайтбокс. Для простоты использования, я создал отдельную шаблонную функцию для самого HTML:
Последний шаг в создании оболочки — добавление обработчика событий для ссылок «Следующая» и «Предыдущая»:
Теперь оболочка лайтбокса готова к работе с несколькими слайдами. В моей функции «show» я вызываю «goTo()», для загрузки первого слайда. Эта функция показывает слайд, идентифицированный параметрами, но она также неспеша создает слайды, на случай когда они мне понадобятся. (Важно: не задавайте функцию «goTo» в нижнем регистре, т.к. «goto» — зарезервированное слово в JavaScript).
Создание слайдов
Теперь слайд, на который я смотрю, находится в области просмотра, а предыдущий и следующий слайды — соответственно слева и справа от видимой области экрана. Когда пользователь касается кнопки «Следующий», текущий слайд уходит влево, и замещается следующим слайдом.
Сама по себе, функция «buildSlide» более сложна. Помимо движения данных через шаблон слайдов, код должен сделать так, чтобы слайды помещались в область просмотра. Это простая задача выяснения, насколько масштабировать изображение, если оно не соответствует. Мы можем позволить браузеру обрабатывать изменение размеров.
«goTo» перемещает запрашиваемый и смежные слайды в область просмотра.
На данный момент лайтбокс более или менее функционален. Мы можем перейти к следующему и предыдущему слайду, мы можем скрыть и показать его. Было бы идеально узнать, когда мы достигнем первого или последнего слайда: можно, например, отображать средства управления серым цветом. Это применимо как для десктопов, так и для сенсорных устройств.
Добавление поддержки жестов
Большинство сенсорных устройств имеют встроенные программы просмотра фотографий. Эти различные приложения, следуя оригинальному приложению просмотра фотографий для iPhone, создали соглашение для интерфейсов: скольжение пальца влево показывает следующий слайд. Я видел несколько реализаций такого взаимодействия, которые вообще не дают обратной связи — слайды просто заменяются, когда жест завершен. Правильный подход — дать живую обратную связь. Поскольку пользователь скользит пальцем, слайды должны двигаться вместе с ним, и, в зависимости от направления, должен появляться следующий или предыдущий слайд. Это создает иллюзию, что пользователь вытягивает полосу фотографий.
Обработка сенсорных событий
Много библиотек, в том числе и «Zepto», включают поддержку сенсорных событий. В целом я не рекомендую использовать их. При обработке сенсорных событий, вы обновляете элементы вместе с пользовательскими жестами. Когда задержка заметна для пользователя, это вызывает чувство медленного интерфейса. Одна из главных причин, по которой мы использовали библиотеки для событий, состоит в том, чтобы обеспечить нормализацию в браузерах. У всех мобильных браузеров, которые поддерживают сенсорные события, есть такие же API.
Есть три сенсорных события, которые мы рассмотрим в этом примере: «touchstart», «touchmove» и «touchend». Есть также событие «touchcancel», когда жест прерван по некоторым причинам (например, push-сообщение). При разработке вы должны корректно их обрабатывать.
Обработчик событий получает объект «TouchEvent». События «touchstart» и «touchmove» содержат свойство «touches», которое является объектом массива «Touch». Для скольжения пальцем необходимо только одно свойство: «clientX». Оно содержит значение позиции касания относительно верхнего левого угла страницы.
iOS устройства поддерживают до одиннадцати одновременных касаний. Android (до Ice Cream Sandwich) поддерживает только одно. Большинство взаимодействий требуют только одного касания. Более сложные жесты заставляют беспокоиться о множественных касаниях.
Функция «handleTouchEvents»
Сначала определим несколько переменных вне этой функции для поддержки состояний:
Следующее ответвление основано на свойстве типа объекта события:
Событие «touchstart» запускается в начале любого сенсорного события, поэтому используйте его, чтобы записать, где жест начался, что пригодится позже. Избавьтесь от любых переходов, которые все еще могут быть в тегах.
В «touchmove» определите, сколько касание прошло вдоль «clientX», а затем переместите текущий слайд на такое же расстояние. Если слайд перемещается влево, также переместите следующий слайд, если вправо — соответственно переместите предыдущий слайд. Таким образом вы двигаете только два блока, но это создает иллюзию, что двигается целая полоса.
В конце слайдов необходимо определить дальнейшее поведение: идти по кругу или остановиться на последнем слайде. Если оставлять пользователя на последнем слайде, то при попытке пролистать слайд, нужно возвращать его обратно на свою позицию, таким образом давая пользователю обратную связь относительно того, почему слайд не изменился.
Теперь все основные элементы на месте. У вас есть простой сенсорный лайтбокс!
От переводчика:
Если вы нашли какие-то ошибки перевода, прошу отписаться в личных сообщениях. Спасибо.