amp-lightbox
Description
Displays elements in a full-viewport “lightbox” modal.
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 بالمثال". |
[جدول المحتويات]
السُلوك
يحدد المكوِّن amp-lightbox العناصر الثانوية التي يتم عرضها في تراكب/شكل إطار العرض الكامل. عندما ينقر المستخدِم على عنصر (مثل زر)، فإن معرّف amp-lightbox المُشَار إليه في السمة on للعنصر يؤدي إلى ظهور العرض المبسط بحيث يأخذ حجم كامل الإطار ويعرض عناصر amp-lightbox الثانوية.
يؤدي الضغط على مفتاح escape في لوحة المفاتيح إلى غلق العرض المبسط. أو بدلاً من ذلك، يؤدي تعيين السمة on على عنصر واحد أو أكثر في العرض المبسط وتعيين طريقته على close إلى إغلاق العرض المبسط عند النقر على العنصر.
<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> لعرض الصور في العرض المبسط. السمات
| animate-in (اختياريّة) | تحدد نمط حركة فتح العرض المبسط. وسيتم تعيين هذا تلقائيًا على fade-in. والقيم الصالحة هي fade-in وfly-in-bottom وfly-in-top. ملاحظة: تعمل الحركة fly-in-* على الإعداد المسبق لتعديل الخاصية transform للعنصر amp-lightbox. لا تعتمد على تحويل العنصر amp-lightbox مباشرة. إذا احتجت إلى تطبيق تحويل، عيِّنه على عنصر مدمج بدلاً من ذلك. |
| close-button (مطلوبة في إعلانات AMPHTML) | تعرض رأس زر الإغلاق أعلى العرض المبسط. هذه السمة مطلوبة وصالحة للاستخدام مع إعلانات AMPHTML فقط. |
| id (مطلوبة) | معرّف فريد للعرض المبسط. |
| layout (مطلوبة) | يجب تعيينها على nodisplay. |
| scrollable (اختياريّة) | عند توفر السمة scrollable، يمكن تمرير محتوى العرض المبسط عندما يتجاوز ارتفاع إعلان العرض المبسط. ملاحظة: غير مسموح بالسمة scrollable عند استخدام <amp-lightbox> داخل إعلان AMPHTML. اقرأ القسم استخدام amp-lightbox في إعلانات AMPHTML للحصول على التفاصيل. |
| scrollable (اختياريّة) |
التصميم
يمكنك تصميم amp-lightbox باستخدام CSS القياسي.
الإجراءات
يعرض amp-lightbox الإجراءات التالية التي يمكنك استخدام بنية on في AMP لتشغيلها:
| الإجراء | الوصف |
|---|---|
open (تلقائي) | يفتح العرض المبسط. |
close | يغلق العرض المبسط. |
استخدام amp-lightbox في إعلانات AMPHTML
إن استخدام المكوِّن amp-lightbox في إعلانات AMPHTML تجريبي وخاضع للتطوير المستمر. لاستخدام amp-lightbox في إعلانات AMPHTML، فعِّل التجربة amp-lightbox-a4a-proto.
هناك بعض الاختلافات بين استخدام amp-lightbox في مستندات AMP العادية والإعلانات المكتوبة باللغة AMPHTML:
السمة close-button مطلوبة
تكون السمة close-button مطلوبة بالنسبة إلى إعلانات AMPHTML. تؤدي هذه السمة إلى عرض رأس أعلى العرض المبسط. ويحتوي الرأس على زر الإغلاق وتصنيف مكتوب عليه "إعلان". ترجع أسباب طلب هذا الرأس إلى ما يلي:
- إعداد تجربة متسقة للمستخدِم يمكن التنبؤ بها لإعلانات AMPHTML
- التأكد من وجود نقطة خروج دائمة للعرض المبسط، وإلا يمكن لتصميم الإعلان اختراق محتوى مستندات المضيف بفعالية من خلال العرض المبسط.
السمة close-button مطلوبة ولا يُسمح بها إلا في إعلانات AMPHTML. في مستندات AMP العادية، يمكنك تقديم زر الإغلاق في أي مكان تحتاج إليه كجزء من محتوى <amp-lightbox>.
غير مسموح بإعلانات العرض المبسط القابلة للتمرير
بالنسبة إلى إعلانات AMPHTML، لا يُسمح باستخدام إعلانات العرض المبسط القابلة للتمرير.
الخلفية شفافة
عندما تستخدم <amp-lightbox> في إعلانات AMPHTML، تصبح خلفية العنصر <body> شفافة لأن وقت تشغيل AMP يغيّر حجم محتوى تصميم الإعلان ويعيد تنظيمه قبل توسيع العرض المبسط. يتم ذلك لمنع حدوث "قفزة" بصرية في التصميم أثناء فتح الإعلان. إذا كان تصميم إعلانك يحتاج إلى خلفية، عيّنها على حاوية متوسطة (مثل <div> بالحجم الكامل) بدلاً من <body>.
عند تشغيل إعلان AMPHTML في بيئة خارجية (في مستند غير AMP مثلاً)، يتوسط التصميم في إطار العرض ثم يتم توسيعه. ويحدث هذا لأن إطارات iframe الخارجية تحتاج إلى الاعتماد على واجهة برمجة تطبيقات postMessage لتفعيل ميزات مثل تغيير حجم الإطار، وهو ما يحدث بشكل غير متزامن، لذا فإن توسيط التصميم أولاً يتيح انتقالاً سلسًا بدون حدوث قفزات مرئية.
أمثلة على الانتقال في العرض المبسط لإعلانات AMPHTML
في الأمثلة أدناه، نوضح شكل الانتقال لإعلان AMPHTML يحتوي على السمة animate-in="fly-in-bottom" وقد تم تعيينها على عنصر العرض المبسط لإعلان AMPHTML في إطار iframe صديق وإعلان AMPHTML في iframe خارجي.
إطارات iframe صديقة (من ذاكرة التخزين المؤقت لصفحات AMP مثلاً)
إطارات iframe خارجية (من خارج ذاكرة التخزين المؤقت لصفحات AMP مثلاً)
التحقق
اطِّلع على قواعد amp-lightbox في مواصفات مدقق AMP.
لقد قرأت هذا المستند عشرات المرات ولكن ألم يُجِب عن جميع أسئلتك؟ ربما حصل ذات الأمر مع أشخاص آخرين: تواصل معهم على Stack Overflow.
الذهاب إلى Stack Overflow هل وجدت خطأ أو تفتقد لميزة؟يشجع مشروع AMP مشاركتك ومساهمتك بشدة! ونأمل أن تكون مشاركًا دائمًا في مجتمعنا مفتوح المصدر، ولكننا نشجع أيضًا المساهمات التي تحدث لمرة واحدة في الأمور التي تتحمس لها.
الانتقال إلى GitHub