amp-lightbox
Description
Öğeleri tam görüntü alanı "lightbox" kalıcı iletişim kutusunda görüntüler.
Required Scripts
<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
Supported Layouts
Örnekler
| Açıklama | Öğeleri tam görüntü alanı "lightbox" kalıcı iletişim kutusunda görüntüler. |
| Zorunlu Komut Dosyası | <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script> |
| Desteklenen Düzenler | nodisplay |
| Örnekler | Örneklerle AMP amp-lightbox örneklerine bakın. |
Davranış
amp-lightbox bileşeni, tam görüntü alanı yer paylaşımı/kalıcı iletişim kutusunda görüntülenen alt öğeleri tanımlar. Kullanıcı bir öğeye (ör. bir düğme) dokunduğunda veya tıkladığında, tıklanan öğenin on özelliğinde referans alınan amp-lightbox kimliği, lightbox'ın tam görüntü alanını kaplamasını tetikler ve amp-lightbox alt öğelerini görüntüler.
Klavyedeki çıkış tuşuna basıldığında lightbox kapanır. Alternatif olarak, lightbox içinde bir veya daha fazla öğede on özelliği ayarlanır ve close yöntemi belirlenirse öğeye dokunulduğunda veya öğe tıklandığında lightbox kapatılır.
<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> bileşeni de vardır. Özellikler
| animate-in (isteğe bağlı) | Lightbox'ın açılış animasyonu stilini tanımlar. Varsayılan olarak bu özellik fade-in değerine ayarlanır. Geçerli değerler şunlardır: fade-in, fly-in-bottom ve fly-in-top. Not: fly-in-* animasyonu hazır ayarları, amp-lightbox öğesinin transform özelliğini değiştirir. amp-lightbox öğesini doğrudan dönüştürmeyin. Bir dönüşüm uygulamanız gerekiyorsa bunu, iç içe yerleştirilmiş bir öğede ayarlayın. |
| close-button (AMPHTML reklamlarında gerekir) | Lightbox'ın üst kısmında bir kapat düğmesi başlığı oluşturur. Bu özellik yalnızca AMPHTML Reklamları ile kullanım için gerekli ve geçerlidir. |
| id (gerekli) | Lightbox için benzersiz bir tanımlayıcı. |
| layout (gerekli) | nodisplay değerine ayarlanmalıdır. |
| scrollable (isteğe bağlı) | scrollable özelliği mevcutsa, lightbox içeriğinin lightbox yüksekliğinden taştığı durumlarda içerik kaydırılabilir. Not: AMPHTML reklamının içinde <amp-lightbox> kullanılırken scrollable özelliğine izin verilmez. Ayrıntılar için AMPHTML reklamları amp-lightbox özelliğini kullanma konusunu okuyun. |
| scrollable (isteğe bağlı) |
Stil
amp-lightbox özelliğini standart CSS ile şekillendirebilirsiniz.
İşlemler
amp-lightbox, söz diziminde AMP kullanabileceğiniz aşağıdaki işlemlerin tetiklenmesini sağlar:
| İşlem | Açıklama |
|---|---|
open (varsayılan) | Lightbox'ı açar. |
close | Lightbox'ı kapatır. |
AMPHTML reklamlarında amp-lightbox özelliğini kullanma
amp-lightbox bileşeninin AMPHTML reklamlarında kullanılması deneme aşamasındadır ve etkin bir şekilde geliştirilmektedir. AMPHTML reklamlarında amp-lightbox özelliğini kullanmak amp-lightbox-a4a-proto denemesini etkinleştirin. amp-lightbox özelliğinin normal AMP dokümanlarında kullanılması ile AMPHTML'de yazılmış reklamlar arasında bazı farklar vardır:
close-button gerektirir
AMPHTML reklamları için close-button özelliği gerekir. Bu özellik, lightbox'ınızın üst kısmında bir başlığın oluşturulmasına neden olur. Başlık, bir kapat düğmesini ve "Reklam"ı görüntüleyen bir etiketi içerir. Bu başlık aşağıdakilerin sağlanması için gereklidir:
- AMPHTML reklamları için tutarlı ve tahmin edilebilir bir kullanıcı deneyimi ayarlama.
- Lightbox için her zaman bir çıkış noktasının var olduğundan emin olma (aksi takdirde, reklam öğesi bir lightbox aracılığıyla ana makine doküman içeriğini etkili bir şekilde ele geçirebilir).
close-button özelliği zorunludur ve yalnızca AMPHTML reklamlarında buna izin verilir. Normal AMP dokümanlarında, <amp-lightbox> içeriğinin parçası olarak ihtiyaç duyduğunuz herhangi bir yerde bir kapat düğmesi oluşturabilirsiniz.
Kaydırılabilir lightbox'lara izin verilmez
AMPHTML reklamlarında kaydırılabilir lightbox'lara izin verilmez.
Şeffaf arka plan
AMP çalışma zamanı lightbox genişletilmeden önce reklam öğenizi yeniden boyutlandırdığı ve yeniden hizaladığı için AMPHTML reklamlarında <amp-lightbox> özelliğini kullandığınızda, <body> öğenizin arka planı şeffaf hale gelir. Bu, lightbox açılırken reklam öğesinin görsel olarak "atlanmasını" önlemek için yapılır. Reklam öğenizin bir arka plana ihtiyacı varsa bu arka planı <body> öğesi yerine bir ara kapsayıcıda (tam boyutlu <div> gibi) ayarlayın.
AMPHTML reklamı bir üçüncü taraf ortamında (örneğin, AMP olmayan bir dokümanda) yayınlandığında, reklam öğesi görüntü alanına göre ortalandıktan sonra genişletilir. Bu durum, üçüncü taraf iframe'lerinin eşzamansız olan çerçeve yeniden boyutlandırma gibi özellikler için bir postMessage API'sini kullanma gerekliliğinden kaynaklanır. Böylece, önce reklam öğesinin ortalanması görsel atlamalar olmadan yumuşak bir geçişe olanak tanır.
AMPHTML reklamları için lightbox'ta geçiş örnekleri
Aşağıdaki örneklerde, bir güvenilir iframe ve bir üçüncü taraf iframe içindeki AMPHTML reklamları için lightbox öğesinde animate-in="fly-in-bottom" özelliğinin ayarlandığı bir AMPHTML reklam geçişinin nasıl göründüğü gösterilmektedir.
Güvenilir iframe'lerde (ör. AMP önbelleğinden gelmektedir)
Üçüncü taraf iframe'lerde (ör. AMP önbelleği dışındadır)
Doğrulama
AMP doğrulayıcı spesifikasyonundaki amp-lightbox kurallarına bakın.
Bu belgeyi defalarca okudunuz ama tüm sorularınıza tatmin edici bir yanıt bulamadınız mı? Belki başka kişiler de bu şekilde hissetmiştir: Stack Overflow'dan onlara ulaşın.
Stack Overflow'a git Bir hata veya eksik bir özellik mi buldunuz?AMP projesi, katılımınızı ve katkılarınızı güçlü bir şekilde teşvik ediyor! Açık kaynak topluluğumuzun devamlı bir katılımcısı olacağınızı umuyoruz ancak özel olarak ilgilendiğiniz konularla ilgili tek seferlik katkıları da memnuniyetle karşılıyoruz.
GitHub'a git