صندوق نور مخصص - حديث، إيماءات السحب، وضع ملء الشاشة والمزيد

[Don]

|||
|-|-|-|
| : eyeglasses: | معاينة| Theme Creator |
| : hammer_and_wrench:|مستودع| GitHub - VaperinaDEV/discourse-custom-lightbox |
| : question:|دليل التثبيت|كيفية تثبيت سمة أو مكون سمة|
| : open_book:|جديد في سمات Discourse؟| دليل المبتدئين لاستخدام سمات Discourse

مرحباً

يقوم مكون السمة هذا بتعديل magnifc popup (lightbox/gallery) لجعله أكثر سهولة في الاستخدام خاصة على الهاتف المحمول.

---

سيقوم هذا المكون بإجراء العديد من التغييرات على magnifc popup الافتراضي.

• تصميم أكثر حداثة
• زر ملء الشاشة (اختصار مفتاح F)
• زر إظهار/إخفاء العنوان
• إيماءات السحب باللمس
• السحب لليمين - الصورة السابقة
• السحب لليسار - الصورة التالية
• السحب لأسفل - إغلاق lightbox

---

ترجمات السمات لتغيير عنوان الأزرار.

zoom_in_button_title: "تكبير"
zoom_out_button_title: "تصغير"
close_button_title: "إغلاق (Esc)"
fullscreen_button_title: "وضع ملء الشاشة (F)"
toggle_title_button_title: "تبديل المعلومات"

---

هذا الـ lightbox المخصص الجديد، مستوحى من New Discourse Lightbox Enabled on Meta - now disabled

---

هل ما زلت ترغب في استخدام الإصدار القديم؟
يمكنك ذلك باستخدام الفرع old-custom-lightbox.

[Mr.X_Mr.X]

سيكون رائعًا إذا كان يمكن التمرير عن طريق السحب لليسار واليمين. بخلاف ذلك، فإن tc رائع.

[Don]

شكراً! نعم، سيكون ذلك رائعاً ولكن للأسف Magnific Popup لا يدعم إيماءات السحب.

[Don]

لقد قمت بتحديث مكون السمة والموضوع الرئيسي.

[Don]

مرحباً

لقد قمت بتحديث مكون السمة هذا

يحتوي هذا التحديث على ما يلي:

1. إسقاط jQuery
2. تغيير لون السمة إلى الأسود عند فتح صندوق الإضاءة. (على سبيل المثال، ستكون شريط الحالة أسود أيضًا كخلفية لصندوق الإضاءة)
3. التحديث إلى أيقونات FontAwesome 6.
4. استخدام مؤشرات تكبير/تصغير على الصورة.

لقد أضفت رابط معاينة إلى الموضوع الأصلي.

[davidkingham]

جميل جداً يا دون، هل هناك فرصة لإضافة خيار لدفع الأسهم وزر التنزيل وعدد الصور إلى خارج الصورة؟ في موقع تصوير فوتوغرافي، ليس من الجيد تغطية أجزاء من الصورة، نريد رؤية الصورة بأكملها دون تشتيت. لا تقلق إذا لم يكن ذلك ممكناً، شكراً!

[Don]

شكرا ديفيد، سأبحث عن حل
الفكرة هي إنشاء زر معلومات جديد لإظهار/إخفاء معلومات الصورة مثل التنزيل، الصورة الأصلية، العنوان، وربما العداد.

[davidkingham]

شكراً لك دون، كنت أفكر في شيء كهذا:

ولكن أيضاً نقل الأسهم خارج الصورة، سيتطلب ذلك أن تكون الصورة أصغر حجماً ليكون هناك بعض الهامش حول الحواف لهذا الغرض.
الخيار الآخر سيكون إخفاء كل المعلومات حتى يتحرك المؤشر، لست متأكداً ما إذا كان ذلك ممكناً.

[Don]

لقد حصلت على بعض الإلهام من كيفية ترتيبها مع صندوق الإضاءة الجديد وقمت بإنشاء مفهوم
أعتقد أن شيئًا كهذا يمكن أن ينجح.

1. تبسيط الأزرار، تغيير المواضع، أسهم أصغر
2. إضافة زر ملء الشاشة وزر معلومات لعرض المعلومات السفلية

[davidkingham]

أحببته! آمل أن تتمكن من جعله يعمل

[Don]

إليك التحديث لهذا المكون السمة لم يتم دمجه بعد ولكن يمكنك تجربة كيفية عمله في Theme Creator.

تغييرات كما ذكرت في هذا المنشور Custom Lightbox - modern, swipe gestures, fullscreen mode and more - #9 by Don.

1. زر ملء الشاشة (يمكنك تشغيله بمفتاح F أيضًا)
2. إظهار/إخفاء زر العنوان
3. عرض أيقونة تكبير/تصغير فقط عندما تقوم بالتكبير.
4. إخفاء الأسهم على الهاتف المحمول
5. تمت إضافة إجراءات السحب باللمس لجعلها أكثر راحة للاستخدام على الأجهزة التي تعمل باللمس.
   • السحب إلى اليمين - الصورة السابقة
   • السحب إلى اليسار - الصورة التالية
   • السحب لأسفل - إغلاق الإضاءة
6. بعض التعديلات على تجربة المستخدم

سيقوم هذا التحديث أيضًا بإزالة الإعدادات.

[davidkingham]

يبدو لطيفًا يا دون! المشكلة الوحيدة التي أراها هي أنه عند النقر على الأسهم السابقة/التالية، يتم إغلاق الضوء، وإذا استخدمت أسهم لوحة المفاتيح، فإنها تعمل كما هو متوقع. لقد جربت متصفحات مختلفة وهي تفعل الشيء نفسه.

[Don]

@davidkingham

عندما أنقر على الأسهم السابقة/التالية، يتم إغلاق الضوء

شكرًا، لقد أصلحتها الآن. هل يمكنك التحقق منها؟

[davidkingham]

يعمل الآن!

[Don]

مرحباً
لقد قمت بدمج صندوق الإضاءة المخصص الجديد
تم تحديث OP أيضاً…

FEATURE: New custom lightbox

[Don]

مرحباً

لقد قمت بدمج ميزة مفقودة للأجهزة التي تعمل باللمس: FEATURE: Change image click behaviour to toggle zoom on touchscreen · VaperinaDEV/discourse-custom-lightbox@7d588e2 · GitHub

تعمل التنقلات في الصور باستخدام إيماءات السحب، لذا يمكننا الآن استخدام النقر على الصورة لتبديل التكبير/التصغير.

[Don]

مرحباً

إليك تحديث جديد!

يتضمن هذا التحديث العديد من التحسينات التصميمية:

• تمت إزالة الحشو حول الضوء
• يمكن الآن تكبير الصور الصغيرة أيضاً
• تصميم زر جديد بخلفية سوداء شفافة، مما يجعل الأزرار مرئية على الصور الفاتحة أيضاً، إلخ.

---

تحسين سطح المكتب:

كان تمرير الصورة المكبرة على سطح المكتب، وخاصة التمرير الأفقي، ليس سهلاً أو سهل الاستخدام.
يقدم هذا التحديث آلية تمرير تتبع المؤشر لتحسين التجربة.

---

DEV: Adds cursor follow mechanism for scrolling on desktop and some design update