AMP

amp-lightbox

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üzenlernodisplay
Ö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>

Lightbox'ta resimleri göstermek için <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 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:

İşlemAçıklama
open (varsayılan)Lightbox'ı açar.
closeLightbox'ı 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.

Need more help?

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