Important: this documentation is not applicable to your currently selected format stories!
amp-lightbox
Отображение элементов в модальном окне просмотра, занимающем всю область просмотра.
Required Scripts
<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script> Supported Layouts
| Описание | Отображает элементы в модальном окне просмотра, занимающем всю область просмотра. |
| Скрипт | <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script> |
| Поддерживаемые макеты | nodisplay |
| Примеры | Пример amp-lightbox на сайте AMP By Example. |
Действия
Компонент amp-lightbox определяет дочерние элементы, которые отображаются в модальном окне, занимающем всю область просмотра. Когда пользователь нажимает на какой-либо элемент (например, на кнопку), идентификатор amp-lightbox, указанный в атрибуте on этого элемента, активирует модальное окно, занимающее всю область просмотра, и отображает дочерние элементы amp-lightbox.
Чтобы закрыть открывшееся окно, нужно нажать клавишу Esc. Также можно в один или несколько элементов модального окна добавить атрибут on и задать в нем метод close, чтобы окно закрывалось при нажатии на него.
<button on="tap:quote-lb">См. цитату</button> <amp-lightbox id="quote-lb" layout="nodisplay"> <blockquote>"Все проходит – пройдет и это". Царь Соломон.</blockquote> <button on="tap:quote-lb.close">Отлично!</button> </amp-lightbox>
Для показа изображений в окне просмотра используется компонент <amp-image-lightbox>.
Атрибуты
| animate-in (необязательно) | Определяет стиль анимации, используемой при открытии окна просмотра. Значение по умолчанию – fade-in. Допустимые значения: fade-in, fly-in-bottom, fly-in-top. Примечание. Параметры анимации fly-in-* изменяют свойство transform элемента amp-lightbox. Не трансформируйте элемент amp-lightbox напрямую. Применяйте трансформацию ко вложенному элементу. |
| close-button (обязательно в объявлениях HTML с технологией AMP) | Отображает кнопку "Закрыть" в верхней части окна просмотра. Этот атрибут применим и обязателен только для объявлений HTML с технологией AMP. |
| id (обязательно) | Уникальный идентификатор окна просмотра. |
| layout (обязательно) | Этому атрибуту следует присвоить значение nodisplay. |
| scrollable (необязательно) | Наличие атрибута scrollable означает, что содержимое окна просмотра можно прокручивать, если оно выходит за рамки окна. Примечание. Атрибут scrollable нельзя использовать с компонентом |
| scrollable (необязательно) |
Стилизация
К компоненту amp-lightbox можно применять каскадные таблицы стилей.
Действия
Компонент amp-lightbox поддерживает следующие действия (подробнее…):
| Действие | Описание |
|---|---|
open (по умолчанию) | Открывает окно просмотра. |
close | Закрывает окно просмотра. |
Как использовать amp-lightbox в объявлениях HTML с технологией AMP
Компонент amp-lightbox, используемый в объявлениях HTML с технологией AMP, является экспериментальным и находится в стадии активной разработки. Чтобы использовать `его в таких объявлениях, [включите экспериментamp-lightbox-a4a-proto`](http://cdn.ampproject.org/experiments.html).
Ниже описывается, чем отличается использование amp-lightbox в обычных документах AMP от использования в объявлениях, написанных для HTML с технологией AMP.
Обязательный атрибут close-button
Для объявлений HTML с технологией AMP атрибут close-button обязателен. Этот атрибут создает в верхней части окна просмотра заголовок, с кнопкой "Закрыть" и ярлык с надписью "Реклама". Этот заголовок необходим:
- чтобы обеспечить последовательное оформление интерфейса объявлений HTML с технологией AMP;
- чтобы обеспечить средство закрытия окон просмотра (в противном случае креатив может скомпрометировать содержание документа через окно просмотра.
Атрибут close-button используется и является обязательным только в объявлениях HTML с технологией AMP. В обычных документах AMP кнопку закрытия можно отображать в любом месте окна как часть содержимого <amp-lightbox>.
Окна просмотра с прокруткой запрещены
В объявлениях HTML с технологией AMP прокрутка в окнах просмотра не допускается.
Прозрачный фон
При использовании компонента <amp-lightbox> в объявлениях HTML с технологией AMP фон элемента <body> становится прозрачным, потому что библиотека AMP изменяет размеры и компоновку креативов перед открытием окна просмотра. Это делается для того, чтобы исключить резкое перемещение креатива при открытии окна просмотра. Если для вашего креатива нужен фон, установите его в промежуточном контейнере (например, в полноэкранном теге <div>), а не в теге <body>.
Когда объявление HTML с технологией AMP показывается в сторонней среде (например, в документе, где не используются технологии AMP), перед раскрытием креатив центрируется относительно области просмотра. Это связано с тем, что сторонние окна iframe используют postMessage API для изменения размеров фрейма, которое выполняется асинхронно. Поэтому предварительное центрирование креатива обеспечивает плавный переход без резких скачков.
Примеры переходов в окне просмотра для объявлений HTML с технологией AMP
В примерах ниже показано, как выглядит переход в объявлении HTML с технологией AMP, в котором есть атрибут animate-in="fly-in-bottom", установленный для элемента lightbox в совместимом окне iframe и в стороннем окне iframe.
Совместимые окна iframe (например, из кеша AMP)
Сторонние окна iframe (например, не из кеша AMP)
Проверка
См. раздел с правилами amp-lightbox в спецификации валидатора AMP.
You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.
Go to Stack Overflow Found a bug or missing a feature?The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.
Go to GitHub