مكون معرض صور منتج قابل للتمرير لـ Framer يدعم التكبير والصور المصغرة العائمة الثابتة والاتجاه الأفقي/العمودي والتبديل بين صور المتغيرات.
ما الذي يفعله
يعرض عرض الوسائط العمودي قائمة من صور المنتج في معرض قابل للتمرير. أثناء تمرير المستخدم عبر الصور، تظهر شريط صور مصغرة عائم في أسفل المعرض — مما يتيح للمستخدمين القفز إلى أي صورة بالنقر على صورتها المصغرة. السلوكيات الرئيسية:- معرض صور قابل للتمرير — تتراص الصور عموديًا (أو جنبًا إلى جنب أفقيًا) ويتمرر المستخدم عبرها بشكل طبيعي.
- اكتشاف الصورة النشطة تلقائيًا — أثناء التمرير، يراقب المكون الصورة الظاهرة ويبرز الصورة المصغرة المقابلة تلقائيًا.
- صور مصغرة عائمة ثابتة — شريط صور مصغرة على شكل حبة يطفو فوق أسفل المعرض أثناء التمرير. يظهر عند دخول المعرض نطاق العرض ويختفي عند التمرير للخارج.
- صور مصغرة قابلة للنقر — النقر على أي صورة مصغرة يمرر المعرض بسلاسة إلى تلك الصورة.
- تكبير عند التحويم — التحويم على صورة يكبّر المنطقة تحت المؤشر (يمكن تعطيله).
- دعم المتغيرات — يقرأ معامل URL
?variant=ويتمرر تلقائيًا إلى الصورة التي تطابق متغير المنتج المحدد. - الوضع الأفقي — يرتب الصور اختياريًا في صف أفقي بدلًا من العمود العمودي.
ضوابط الخصائص
جميع الضوابط متاحة في لوحة Framer اليمنى عند تحديد المكون. تُجمَّع في أربعة أقسام: الصورة، المتغيرات، المعرض، والصور المصغرة.الصورة
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
| Image | نص (JSON) | 4 روابط Unsplash نموذجية | مصفوفة JSON من روابط الصور لعرضها في المعرض. في Framer CMS، اربط هذا بمتغير "Image URLs" من مجموعة CMS الخاصة بك. |
المتغيرات
| الخاصية | النوع | الوصف |
|---|---|---|
| Variants | نص (JSON) | مصفوفة JSON من كائنات متغيرات المنتج، يحتوي كل منها على id وimage.url. اربط هذا بمتغير Variants من Framer CMS. عندما يصل زائر إلى الصفحة بمعامل URL ?variant=<id>، يتمرر المعرض تلقائيًا إلى الصورة المطابقة لذلك المتغير. |
المعرض
يتحكم في المظهر البصري وتخطيط قائمة الصور الرئيسية.| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
| Aspect Ratio | نص | 1/1 | نسبة العرض إلى الارتفاع لكل صورة في المعرض. استخدم صيغة CSS: 1/1 (مربع)، 4/5 (عمودي)، 16/9 (أفقي)، إلخ. |
| Orientation | قائمة | Vertical | يتحكم في اتجاه التمرير. Vertical يرتب الصور من أعلى لأسفل؛ Horizontal يرتبها من اليسار لليمين. |
| Gap | رقم (بكسل) | 16 | المسافة بين الصور في المعرض. النطاق: 0–100 بكسل. |
| Border Radius | رقم (بكسل) | 8 | يجعل زوايا كل صورة مستديرة. النطاق: 0–50 بكسل. |
| Enable Zoom | منطقي | true | عند التفعيل، يكبّر التحويم على صورة المنطقة تحت مؤشر الفأرة (تكبير 2×). عطّله لتجربة معرض ثابتة. |
الصور المصغرة
يتحكم في شريط التنقل بالصور المصغرة العائمة.| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
| Show | منطقي | true | مفتاح رئيسي. أوقفه لإخفاء شريط الصور المصغرة بالكامل. |
| Position | قائمة | Bottom | موضع تثبيت شريط الصور المصغرة. الخيارات: Bottom، Left، Top، Right. |
| Thumbnail Bottom Offset | رقم (بكسل) | 20 | المسافة فوق الحافة السفلية للمعرض التي يطفو عندها شريط الصور المصغرة. النطاق: 0–200 بكسل. مخفي عند إيقاف Show. |
| Thumbnail Blur | رقم (بكسل) | 12 | شدة تأثير الضبابية الزجاجية على خلفية شريط الصور المصغرة. 0 يزيل الضبابية. النطاق: 0–50 بكسل. مخفي عند إيقاف Show. |
| Thumbnail Border Radius | رقم (بكسل) | 20 | يجعل زوايا حاوية شريط الصور المصغرة مستديرة. النطاق: 0–50 بكسل. مخفي عند إيقاف Show. |
| Thumbnail Active Color | لون | #3094cd | لون الحدود الذي يبرز الصورة المصغرة النشطة حاليًا. مخفي عند إيقاف Show. |
| Thumbnail Size | رقم (بكسل) | 40 | عرض وارتفاع كل صورة مصغرة. النطاق: 24–80 بكسل. مخفي عند إيقاف Show. |
ملاحظات
- يجب تمرير روابط الصور كـ سلسلة مصفوفة JSON (مثال:
["https://...", "https://..."]). يتعامل Framer CMS مع هذا تلقائيًا عند ربط المتغير الصحيح. - تأثير التكبير مبني بالكامل على CSS transform — لا توجد مكتبة خارجية. يكبّر 2× متمركزًا على موضع الفأرة.
- يتمرر شريط الصور المصغرة أفقيًا تلقائيًا عندما يكون هناك صور مصغرة أكثر مما يتسع في المساحة المرئية.