amp-lightbox
Description
Mostra gli elementi in una finestra modale "lightbox" a piena area visibile.
Required Scripts
<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
Supported Layouts
| Descrizione | Mostra gli elementi in una finestra modale "lightbox" a piena area visibile. |
| Script obbligatorio | <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script> |
| Layout supportati | nodisplay |
| Esempi | Vedi l'esempio amp-lightbox del sito AMP By Example. |
Comportamento
Il componente amp-lightbox definisce gli elementi secondari che vengono visualizzati in una finestra modale/overlay a piena area visibile. Quando l'utente tocca o fa clic su un elemento (ad esempio, un pulsante), l'ID amp-lightbox di riferimento nell'attributo on dell'elemento selezionato attiva la lightbox in modo che questa occupi l'intera area visibile e vengano visualizzati gli elementi secondari di amp-lightbox.
Premendo il tasto Esc sulla tastiera si chiude la lightbox. In alternativa, se imposti l'attributo on in uno o più elementi all'interno della lightbox e imposti il metodo su close, la lightbox si chiude quando l'utente tocca o fa clic sull'elemento.
<button on="tap:quote-lb">See Quote</button>
<amp-lightbox id="quote-lb" layout="nodisplay">
<blockquote>"Don't talk to me about JavaScript fatigue" - Horse JS</blockquote>
<button on="tap:quote-lb.close">Nice!</button>
</amp-lightbox>
<amp-image-lightbox>. Attributi
| animate-in (facoltativo) | Definisce lo stile di animazione per l'apertura della lightbox. Per impostazione predefinita, è fade-in. Valori validi sono fade-in, fly-in-bottom e fly-in-top. Nota: i preset di animazione fly-in-* modificano la proprietà transform dell'elemento amp-lightbox. Non fare affidamento sulla trasformazione diretta dell'elemento amp-lightbox. Se devi applicare una trasformazione, impostala invece su un elemento nidificato. |
| close-button (obbligatorio per gli annunci HTML AMP) | Mostra l'intestazione di un pulsante di chiusura nella parte superiore della lightbox. Questo attributo è obbligatorio e valido solo per l'uso con gli annunci HTML AMP. |
| id (obbligatorio) | Un identificatore univoco per la lightbox. |
| layout (obbligatorio) | Deve essere impostato su nodisplay. |
| scrollable (facoltativo) | Quando è presente l'attributo scrollable, il contenuto della lightbox può scorrere quando supera l'altezza della lightbox. Nota: l'attributo scrollable non è consentito se utilizzi <amp-lightbox> all'interno di un annuncio HTML AMP. Per ulteriori dettagli, consulta la sezione Utilizzare amp-lightbox in annunci HTML AMP. |
| scrollable (facoltativo) |
Stili
Puoi modificare lo stile ad amp-lightbox con CSS standard.
Azioni
amp-lightbox ti permette di attivare le seguenti azioni utilizzando AMP on-syntax per attivare:
| Azione | Descrizione |
|---|---|
open (predefinita) | Apre la lightbox. |
close | Chiude la lightbox. |
Utilizzare amp-lightbox in annunci HTML AMP
amp-lightbox da utilizzare negli annunci HTML AMP è sperimentale e attualmente in fase di sviluppo. Per utilizzare amp-lightbox in annunci HTML AMP, attiva l'esperimento amp-lightbox-a4a-proto. Vi sono alcune differenze tra l'uso di amp-lightbox in normali documenti AMP e in annunci scritti in HTML AMP:
Richiede close-button
Per gli annunci HTML AMP è necessario l'attributo close-button. Questo attributo fa apparire un'intestazione nella parte superiore della lightbox che contiene un pulsante di chiusura e un'etichetta con il testo "Annuncio". Questa intestazione è necessaria per:
- Impostare un'esperienza utente coerente e prevedibile per gli annunci HTML AMP.
- Assicurati che esista sempre un punto di uscita per la lightbox. In caso contrario, la creatività potrebbe compromettere i contenuti del documento host tramite una lightbox.
L'attributo close-button è obbligatorio e consentito solo negli annunci HTML AMP. Nei normali documenti AMP, puoi far visualizzare un pulsante di chiusura dove necessario come parte dei contenuti <amp-lightbox>.
Le lightbox scorrevoli non sono consentite
Le lightbox scorrevoli non sono consentite negli annunci HTML AMP.
Sfondo trasparente
Quando utilizzi <amp-lightbox> in annunci HTML AMP, lo sfondo dell'elemento <body> diventa trasparente in quanto il runtime AMP ridimensiona e riallinea i contenuti della creatività prima che la lightbox venga espansa. Ciò avviene per evitare un "salto" visivo della creatività all'apertura della lightbox. Se ti serve uno sfondo per la creatività, impostalo in un contenitore intermedio (come un <div> a grandezza originale) anziché in <body>.
Quando l'annuncio HTML AMP viene pubblicato in un ambiente di terze parti, come un documento non AMP, la creatività viene centrata rispetto all'area visibile ed espansa successivamente. Questo perché gli iframe di terze parti devono basarsi su API postMessage per attivare funzioni come il ridimensionamento dei frame, che è asincrono. Centrare prima la creatività permette quindi una transizione fluida senza salti visivi.
Esempi di transizioni in lightbox per annunci HTML AMP
Negli esempi riportati di seguito, dimostriamo come si presenta la transizione per un annuncio HTML AMP con l'attributo animate-in="fly-in-bottom" impostato nell'elemento lightbox per un annuncio HTML AMP in un iframe semplice e un annuncio HTML AMP in un iframe di terze parti.
In iframe semplici, ad esempio, provenienti da cache AMP
In iframe di terze parti, ad esempio, esterni a cache AMP
Convalida
Consulta le regole amp-lightbox nella specifica dello strumento di convalida AMP.
Hai letto questo documento decine di volte ma non risponde a tutte le tue domande? Forse ci sono altre persone col tuo stesso problema: entra in contatto con loro su Stack Overflow.
Vai a Stack Overflow Hai trovato un bug o una funzione mancante?Il progetto AMP invita tutti a partecipare e dare il proprio contributo! Ci auguriamo che tu possa partecipare regolarmente alla nostra community open source, ma saremo anche lieti di ricevere eventuali contributi una-tantum sulle questioni che ti interessano.
Vai a GitHub