كود تحويل الروابط النصية التي تؤدي إلى صور مباشرة إلى صور ظاهرة داخل الصفحة. وبدون استعمال ايقونة ادراج صورة

 📌 كود فتح روابط الصور بشكل مباشر وعرضها بدون أيقونة رابط

🔹 محتوى الموضوع:

السلام عليكم ورحمة الله وبركاته، 🌟

اليوم أقدم لكم كودًا رائعًا ومميزًا لعشاق المنتديات، حيث يقوم هذا الكود بتحويل روابط الصور إلى صور مرئية مباشرة دون الحاجة للنقر على الرابط أو ظهور أيقونة الرابط. 🚀

💡 فكرة الكود:

📌 عند وجود رابط مباشر لصورة داخل محتوى الموضوع أو الردود، سيتم استبداله تلقائيًا بالصورة الفعلية بدلاً من ظهوره كرابط.
📌 عند النقر على الصورة، سيتم فتحها داخل نافذة منبثقة بطريقة أنيقة دون الحاجة لمغادرة الصفحة.
📌 يدعم الكود جميع امتدادات الصور الشائعة مثل:
jpeg, jpg, png, gif, webp, svg

---

⚙️ مميزات الكود:

✅ عرض الصور بشكل مباشر داخل المواضيع والردود دون الحاجة للنقر على الروابط.
✅ نافذة منبثقة أنيقة عند النقر على أي صورة لعرضها بحجم أكبر.
✅ تحسين تجربة المستخدم وتوفير الوقت بدلاً من فتح الروابط يدويًا.
✅ تطبيق تلقائي دون الحاجة إلى تعديل الروابط يدويًا داخل المشاركات.
✅ تصميم عصري مع حواف ناعمة وتأثير الظل لجعل الصور أكثر جاذبية.
✅ يحافظ على أبعاد الصور الأصلية دون تشويه أو تمديد غير مرغوب فيه.

---

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

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

صندوق الكود

/* ========================================================== ❖ التصميم من تنفيذ: جاك سبارو ⚓ ❖ الموقع: https://zx303.blogspot.com/ ❖ مدونة القرصان | جميع الحقوق محفوظة © ❖ يُمنع إزالة أو تعديل الحقوق دون إذن المصمم. ========================================================== */ document.addEventListener("DOMContentLoaded", function () { // استهداف جميع الروابط داخل المحتوى document.querySelectorAll(".block-content a, .post-content a, .postbody a").forEach(function (link) { // التحقق إذا كان الرابط يحتوي على عنصر <img> if (!link.querySelector("img")) { let imageSrc = link.href; // التحقق من أن الرابط يحتوي على امتداد صورة if (imageSrc.match(/\.(jpeg|jpg|png|gif|webp|svg)$/i)) { // إنشاء عنصر الصورة let imgElement = document.createElement("img"); imgElement.src = imageSrc; imgElement.style.maxWidth = "100%"; // جعل الصورة تأخذ العرض الكامل imgElement.style.height = "auto"; // الحفاظ على نسبة العرض إلى الارتفاع imgElement.style.borderRadius = "8px"; // إضافة حدود ناعمة للصورة imgElement.style.boxShadow = "0 4px 8px rgba(0, 0, 0, 0.2)"; // إضافة تأثير الظل // إضافة الحدث لعرض الصورة في نافذة منبثقة عند النقر عليها imgElement.addEventListener("click", function (event) { event.preventDefault(); // منع الانتقال إلى الرابط // إنشاء النافذة المنبثقة 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); }); // استبدال الرابط بالصورة link.parentNode.replaceChild(imgElement, link); } } }); }); /* ========================================================== ❖ نهاية كود التصميم بواسطة جاك سبارو ⚓ ❖ https://zx303.blogspot.com/ | مدونة القرصان ========================================================== */

---

📌 النتيجة بعد تطبيق الكود:

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

🎯 إذا كان لديك أي استفسار أو مشكلة في تركيب الكود، لا تتردد في طرحها هنا! 😊

📢 جرب الكود الآن وشاركنا رأيك! 👇✨