"كود فتح الصور في نافذة منبثقة عند الضغط عليها"

✨ فتح الصور في نافذة منبثقة لمنتديات أحلى منتدى ✨

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

🖼️ شرح كود فتح الصور في نافذة منبثقة

هذا الكود يتيح عرض الصور في نافذة منبثقة عند النقر عليها، مما يحسن تجربة المستخدم.

⚙️ آلية العمل:

• 📥 تحميل الصفحة بالكامل: يضمن تشغيل الكود بعد تحميل المحتوى.

• ⛔ منع الانتقال إلى الرابط الأصلي: يمنع النقر من فتح الرابط العادي.

• 🖼️ إنشاء النافذة المنبثقة: يتم إضافة خلفية شفافة وصورة مكبرة.

• ❌ إضافة زر إغلاق: يسمح للمستخدم بإغلاق النافذة بسهولة.

• 👆 إغلاق النافذة عند النقر على الخلفية.

⭐ مميزات الكود:

• ✅ تحسين تجربة المستخدم دون مغادرة الصفحة.

• 🏗️ خفيف وسهل التطبيق بدون مكتبات إضافية.

• 📂 يدعم جميع امتدادات الصور الشائعة.

• 🎨 تصميم أنيق مع تأثيرات CSS.

• 🌍 مناسب لمنتديات أحلى منتدى والمواقع التجارية.

📜 طريقة تركيب الكود في المنتدى (أحلى منتدى)

1️⃣ انتقل إلى لوحة الإدارة.
2️⃣ اختر عناصر إضافية ➝ إدارة أكواد JavaScript.
3️⃣ اضغط على إنشاء كود جديد.
4️⃣ ضع اسمًا للكود، مثل: فتح روابط الصور تلقائيًا.
5️⃣ في خانة المحتوى، قم بلصق الكود المرفق.
6️⃣ في خيار مكان التشغيل، اختر: ✅ المواضيع فقط
7️⃣ اضغط على حفظ، وسيبدأ الكود بالعمل فورًا.

     الكود متوافق مع منتديات احلى منتدى التالية : phpBB2، PunBB، Invision، ModernBB، AwesomeBB.

صندوق الكود

/* ========================================================== ❖ التصميم من تنفيذ: جاك سبارو ⚓ ❖ الموقع: https://zx303.blogspot.com/ ❖ مدونة القرصان | جميع الحقوق محفوظة © ❖ يُمنع إزالة أو تعديل الحقوق دون إذن المصمم. ========================================================== */ document.addEventListener("DOMContentLoaded", function () { // استهداف جميع الروابط التي تحتوي على صور document.querySelectorAll(".block-content a, .post-content a, .postbody a").forEach(function (link) { let image = link.querySelector("img"); if (image) { link.addEventListener("click", function (event) { event.preventDefault(); // منع الانتقال إلى الرابط // الحصول على رابط الصورة let imageSrc = image.src || link.href; // التحقق من أن الرابط يحتوي على امتداد صورة if (!imageSrc.match(/\.(jpeg|jpg|png|gif|webp|svg)$/i)) return; // إنشاء النافذة المنبثقة let popupOverlay = document.createElement("div"); popupOverlay.style.position = "fixed"; popupOverlay.style.top = "0"; popupOverlay.style.left = "0"; popupOverlay.style.width = "100%"; popupOverlay.style.height = "100%"; popupOverlay.style.backgroundColor = "rgba(0, 0, 0, 0.8)"; popupOverlay.style.display = "flex"; popupOverlay.style.alignItems = "center"; popupOverlay.style.justifyContent = "center"; popupOverlay.style.zIndex = "1000"; // إنشاء عنصر الصورة لعرضها let popupImage = document.createElement("img"); popupImage.src = imageSrc; popupImage.style.maxWidth = "80%"; popupImage.style.maxHeight = "80%"; popupImage.style.borderRadius = "10px"; popupImage.style.boxShadow = "0px 8px 20px rgba(255, 255, 255, 0.2)"; // إنشاء صورة زر الإغلاق let closeButton = document.createElement("img"); closeButton.src = "https://cdn-icons-png.flaticon.com/512/1828/1828778.png"; // ???? رابط صورة زر الإغلاق (يمكنك تغييره) closeButton.style.position = "absolute"; closeButton.style.top = "15px"; closeButton.style.right = "20px"; closeButton.style.width = "35px"; // حجم الصورة closeButton.style.cursor = "pointer"; closeButton.style.transition = "0.3s"; // عند النقر على زر الإغلاق، يتم إزالة النافذة المنبثقة closeButton.addEventListener("click", function () { document.body.removeChild(popupOverlay); }); // عند النقر على الخلفية السوداء، يتم إغلاق النافذة popupOverlay.addEventListener("click", function (e) { if (e.target === popupOverlay) { document.body.removeChild(popupOverlay); } }); // إضافة العناصر إلى الصفحة popupOverlay.appendChild(popupImage); popupOverlay.appendChild(closeButton); document.body.appendChild(popupOverlay); }); } }); }); /* ========================================================== ❖ نهاية كود التصميم بواسطة جاك سبارو ⚓ ❖ https://zx303.blogspot.com/ | مدونة القرصان ========================================================== */

  الكود متوافق مع النسخة الثالثة لأحلى منتدى : phpBB3 .    

صندوق الكود

/* ========================================================== ❖ التصميم من تنفيذ: جاك سبارو ⚓ ❖ الموقع: https://zx303.blogspot.com/ ❖ مدونة القرصان | جميع الحقوق محفوظة © ❖ يُمنع إزالة أو تعديل الحقوق دون إذن المصمم. ========================================================== */ document.addEventListener("DOMContentLoaded", function () { // استهداف الصور داخل الروابط ضمن الفئات .content a img و .content img document.querySelectorAll(".content a img, .content img").forEach(function (img) { img.addEventListener("click", function (event) { event.preventDefault(); // منع الانتقال إلى الرابط // الحصول على رابط الصورة const imageSrc = img.src; // التحقق من أن الصورة لا تحتوي على رابط فارغ أو غير صالح if (!imageSrc) return; // إنشاء النافذة المنبثقة let popupOverlay = document.createElement("div"); popupOverlay.style.position = "fixed"; popupOverlay.style.top = "0"; popupOverlay.style.left = "0"; popupOverlay.style.width = "100%"; popupOverlay.style.height = "100%"; popupOverlay.style.backgroundColor = "rgba(0, 0, 0, 0.8)"; popupOverlay.style.display = "flex"; popupOverlay.style.alignItems = "center"; popupOverlay.style.justifyContent = "center"; popupOverlay.style.zIndex = "1000"; // إنشاء عنصر الصورة لعرضها let popupImage = document.createElement("img"); popupImage.src = imageSrc; popupImage.style.maxWidth = "80%"; popupImage.style.maxHeight = "80%"; popupImage.style.borderRadius = "10px"; // إنشاء صورة زر الإغلاق let closeButton = document.createElement("img"); closeButton.src = "https://cdn-icons-png.flaticon.com/512/1828/1828778.png"; // ???? رابط صورة زر الإغلاق (يمكنك تغييره) closeButton.style.position = "absolute"; closeButton.style.top = "15px"; closeButton.style.right = "20px"; closeButton.style.width = "35px"; // حجم الصورة closeButton.style.cursor = "pointer"; closeButton.style.transition = "0.3s"; // تأثير hover لتكبير زر الإغلاق عند المرور عليه closeButton.onmouseover = function () { closeButton.style.transform = "scale(1.2)"; }; closeButton.onmouseout = function () { closeButton.style.transform = "scale(1)"; }; // عند النقر على زر الإغلاق، يتم إزالة النافذة المنبثقة closeButton.addEventListener("click", function () { document.body.removeChild(popupOverlay); }); // عند النقر على الخلفية السوداء، يتم إغلاق النافذة popupOverlay.addEventListener("click", function (e) { if (e.target === popupOverlay) { document.body.removeChild(popupOverlay); } }); // إضافة العناصر إلى الصفحة popupOverlay.appendChild(popupImage); popupOverlay.appendChild(closeButton); document.body.appendChild(popupOverlay); }); }); }); /* ========================================================== ❖ نهاية كود التصميم بواسطة جاك سبارو ⚓ ❖ https://zx303.blogspot.com/ | مدونة القرصان ========================================================== */

🏁 خاتمة

باستخدام هذا الكود البسيط، يمكنك جعل منتداك أكثر احترافية وسهولة في التصفح، مما يتيح للأعضاء والزوار عرض الصور بطريقة جذابة دون مغادرة الصفحة. يمكنك تعديل الكود ليناسب احتياجاتك، سواءً من حيث التصميم أو الوظائف الإضافية. جربه الآن واستمتع بتجربة عرض صور سلسة وجذابة! 😊