كود عرض مقاطع الفيديو وفتح الصور والروابط في نافذة منبثقة + إشعار بالرسائل الجديدة

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

مزايا هذا الكود:

تحويل تلقائي لروابط الفيديو إلى صور مصغرة
عرض الفيديوهات في نافذة منبثقة بدون الحاجة لمغادرة الصفحة
دعم منصات متعددة (YouTube - Dailymotion - Ok.ru)
تصميم جذاب ومتجاوب يعمل على جميع الأجهزة
تأثيرات بصرية أنيقة مثل تكبير الصورة وزر التشغيل المتحرك
إمكانية تشغيل الفيديوهات وقوائم التشغيل مباشرة داخل النافذة
فتح الصور داخل المواضيع في نافذة منبثقة أنيقة.
فتح الروابط الخارجية في نافذة منبثقة دون مغادرة المنتدى.
عرض الصور مباشرةً عند مشاركة رابط صورة بدون الحاجة لاستخدام img
إشعار تلقائي بوجود رسائل جديدة مع نافذة تنبيهية جذابة.

توافق الكود مع جميع نسخ منتديات "أحلى منتدى"

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

1- تحويل روابط الفيديو إلى صور مصغرة قابلة للنقر

يقوم الكود تلقائيًا بتحويل روابط فيديوهات YouTube، Dailymotion، وOK.ru في المنتدى إلى صور مصغرة تفاعلية، مما يجعل تجربة المشاهدة أكثر سلاسة وجاذبية.
:: مثال:

2- تشغيل الفيديوهات في نافذة منبثقة أنيقة

عند النقر على الصورة المصغرة، يتم فتح الفيديو في نافذة منبثقة احترافية تحتوي على زر إغلاق، مع دعم لقوائم التشغيل، وتصميم متجاوب مع جميع الأجهزة، بالإضافة إلى تأثيرات CSS رائعة.
:: مثال:

3- دعم قوائم التشغيل

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

4- عرض الصور داخل المواضيع في نوافذ منبثقة

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

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

6- تنبيه بوجود رسائل جديدة
عند تلقي رسالة جديدة، يظهر تنبيه مرئي جذاب في المنتدى، مما يسهل على الأعضاء متابعة رسائلهم دون الحاجة إلى تحديث الصفحة باستمرار.
:: مثال:

طريقة إضافة الكود إلى المنتدىلوحة الإدارة ➝ عناصر إضافية ➝ إدارة أكواد JavaScript
العنوان (مثلاً: كود النوافذ المنبثقة).
المكان، اختر جميع الصفحات لضمان تفعيل الكود في كل المنتدى.

صندوق الكود

/* ==========================================================
   ❖ التصميم من تنفيذ: جاك سبارو ⚓
   ❖ الموقع: https://zx303.blogspot.com/
   ❖ مدونة القرصان | جميع الحقوق محفوظة © 
   ❖ يُمنع إزالة أو تعديل الحقوق دون إذن المصمم.
   ========================================================== */

// تحديد المعرفات المناسبة للمنتديات
var totoMenoTotoMeno = {
    'phpBB2': '.postbody a img,.postbody  img', // للمنتدى phpBB2
    'phpBB3': '.content a img,.content  img', // للمنتدى phpBB3
    'PunBB': '.postbody a img,.postbody  img', // للمنتدى PunBB
    'Invision': '.post-entry a img,.post-entry  img', // للمنتدى Invision
    'ModernBB': '.content a img,.content  img', // للمنتدى ModernBB
    'AwesomeBB': '.post-content a img,.post-content  img' // للمنتدى AwesomeBB
};

// تحديد النسخة الحالية للمنتدى
var currentServer = 'AwesomeBB';
var authorSelector = totoMenoTotoMeno[currentServer];

document.addEventListener("DOMContentLoaded", function () {
    // التحقق من أن المعرف يتم اختياره بشكل صحيح
    console.log('Author selector for', currentServer, ':', authorSelector);

    // استهداف الصور داخل الروابط ضمن الفئة المحددة بناءً على النسخة
    var images = document.querySelectorAll(authorSelector);
    
    // طباعة العناصر المستهدفة في وحدة التحكم للتحقق من أن الكود يلتقط الصور بشكل صحيح
    console.log('Images found:', images);

    images.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";
            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";

            // تأثير 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);
        });
    });
});
/*** نهاية كود فتح الصور في نافذة منبثقة في المواضيع ***/



/***بداية كود فتح الروابط الخارجية بنبثاق داخل المنتدى***/
document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll("a").forEach(function (link) {
        link.addEventListener("click", function (event) {
            // استثناء الأزرار خارج الموضوع أو العناصر غير المتعلقة بالموضوع
            if (
                link.tagName.toLowerCase() === "button" ||
                link.closest("form") ||
                !link.closest(".post") ||  // استثناء الروابط خارج المحتوى (خارج الموضوع)
                link.closest(".fa_toolbar_L_Sized") // استثناء روابط شريط الإشعارات
            ) {
                return;
            }

            // التحقق من أن الرابط لا يحتوي على صورة
            const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp'];
            const linkHref = link.href.toLowerCase();

            // إذا كان الرابط يحتوي على امتداد صورة، لا نمنع الانتقال
            if (imageExtensions.some(ext => linkHref.endsWith(ext))) {
                return; // تجاوز تنفيذ الكود
            }

            if (link.hostname !== window.location.hostname) {
                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";

                // إنشاء الإطار (iframe) لعرض الرابط
                let popupFrame = document.createElement("iframe");
                popupFrame.src = link.href;
                popupFrame.style.width = "80%";
                popupFrame.style.height = "80%";
                popupFrame.style.border = "none";
                popupFrame.style.borderRadius = "10px";
                popupFrame.style.backgroundColor = "#fff";

        // إنشاء صورة زر الإغلاق
            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(popupFrame);
                popupOverlay.appendChild(closeButton);
                document.body.appendChild(popupOverlay);
            }
        });
    });
});
/***نهاية كود فتح الروابط الخارجية بنبثاق داخل المنتدى***/
 
/***بداية كود فتح روابط الصور بشكل مباشر بدون رمز الصور***/
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);
            }
        }
    });
});
/***نهاية كود فتح روابط الصور بشكل مباشر بدون رمز الصور***/

/***بداية كود رسالة تنبيهية برسالة جديدة***/
document.addEventListener("DOMContentLoaded", function () {
    // دالة لإظهار الصور بتأثير تدريجي
    function fadeInElements() {
        document.querySelectorAll(".not-fancyImg, .signature_div img").forEach(img => {
            img.style.opacity = 0;
            img.style.transition = "opacity 0.3s ease-in-out";
            setTimeout(() => img.style.opacity = 1, 100);
        });
    }

    // دالة للتحقق من الرسائل الجديدة وعرض نافذة منبثقة
    function checkNewMessages() {
        var messageIcon = document.querySelector("a.mainmenu #i_icon_mini_new_message");
        if (messageIcon) {
            var newMessages = messageIcon.getAttribute("alt").match(/[0-9]+/);
            if (newMessages && parseInt(newMessages[0]) > 0) {
                let lastShownMessages = localStorage.getItem("lastShownMessages");

                // إذا لم يتم عرض النافذة مسبقًا لهذا العدد من الرسائل، فقم بعرضها
                if (lastShownMessages !== newMessages[0]) {
                    showFullScreenPopup(newMessages[0]);
                    localStorage.setItem("lastShownMessages", newMessages[0]); // حفظ العدد الجديد
                }
            }
        }
    }

    // دالة لعرض نافذة منبثقة تملأ الشاشة بالكامل
    function showFullScreenPopup(messageCount) {
        // التأكد من عدم وجود نافذة مفتوحة مسبقًا
        if (document.getElementById("full-screen-popup")) return;

        // إنشاء الخلفية الشفافة التي تملأ الشاشة
        var overlay = document.createElement("div");
        overlay.id = "full-screen-popup";
        overlay.style.position = "fixed";
        overlay.style.top = "0";
        overlay.style.left = "0";
        overlay.style.width = "100vw";
        overlay.style.height = "100vh";
        overlay.style.background = "rgba(0, 0, 0, 0.8)"; // شفافية 80%
        overlay.style.display = "flex";
        overlay.style.alignItems = "center";
        overlay.style.justifyContent = "center";
        overlay.style.zIndex = "1000";

        // إنشاء المحتوى داخل النافذة
        var popupContent = document.createElement("div");
        popupContent.style.background = "#fff";
        popupContent.style.padding = "20px";
        popupContent.style.borderRadius = "10px";
        popupContent.style.textAlign = "center";
        popupContent.style.boxShadow = "0 0 15px rgba(255, 255, 255, 0.3)";
        popupContent.style.maxWidth = "400px";

        // إنشاء الصورة
        var img = document.createElement("img");
        img.src = "https://i.servimg.com/u/f48/16/58/89/73/e-mail11.png";
        img.style.cursor = "pointer";
        img.style.width = "150px";
        img.style.transition = "0.3s";
        img.onmouseover = function () {
            img.src = "https://i.servimg.com/u/f48/16/58/89/73/email_11.png";
        };
        img.onmouseout = function () {
            img.src = "https://i.servimg.com/u/f48/16/58/89/73/e-mail11.png";
        };
        img.onclick = function () {
            window.location.href = "/privmsg?folder=inbox";
        };

        // نص عدد الرسائل
        var msgText = document.createElement("p");
        msgText.style.fontSize = "18px";
        msgText.style.color = "#222";
        msgText.style.marginTop = "10px";
        msgText.innerHTML = `لديك <span style="color: gold; font-weight: bold;">${messageCount}</span> رسالة جديدة`;

        // زر الإغلاق
        var closeButton = document.createElement("button");
        closeButton.innerText = "إغلاق";
        closeButton.style.marginTop = "15px";
        closeButton.style.padding = "10px 15px";
        closeButton.style.border = "none";
        closeButton.style.background = "red";
        closeButton.style.color = "white";
        closeButton.style.borderRadius = "5px";
        closeButton.style.cursor = "pointer";
        closeButton.onclick = function () {
            document.body.removeChild(overlay);
        };

        // تجميع العناصر
        popupContent.appendChild(img);
        popupContent.appendChild(msgText);
        popupContent.appendChild(closeButton);
        overlay.appendChild(popupContent);
        document.body.appendChild(overlay);

        // إغلاق النافذة عند النقر خارج المحتوى
        overlay.addEventListener('click', function(event) {
            if (event.target === overlay) {
                document.body.removeChild(overlay);
            }
        });
    }

    // تنفيذ الدوال عند تحميل الصفحة
    fadeInElements();
    checkNewMessages();

    // إعادة التحقق من الرسائل الجديدة كل 30 ثانية
    setInterval(checkNewMessages, 30000);
});
/***نهاية كود رسالة تنبيهية برسالة جديدة***/


jQuery(document).ready(function () {
    var ancho = "530px";
    var alto = "298px";
    var defaultThumbnail = "https://i.servimg.com/u/f24/19/34/83/47/unname11.png"; // صورة بديلة لقائمة تشغيل Dailymotion
    var defaultThumbnail2 = "https://i.servimg.com/u/f24/19/34/83/47/1_jii012.jpg"; // صورة بديلة لقائمة تشغيل Dailymotion
          
    if (jQuery("#videoPopup").length === 0) {
        jQuery("body").append(`
            <div id="videoPopup" class="popup-overlay">
                <div class="popup-content video-popup-content">
                    <span class="close-popup">×</span>
                    <iframe id="videoFrame" width="100%" height="100%" frameborder="0" allowfullscreen></iframe>
                </div>
            </div>
        `);
    }

    // YouTube
    jQuery('.post-content a[href*="youtube.com/watch?v="], .block-content a[href*="youtube.com/watch?v="], .post a[href*="youtube.com/watch?v="]').each(function () {
        var href = jQuery(this).attr('href');
        var videoIdMatch = href.match(/v=([a-zA-Z0-9_-]{11})/);
        var playlistIdMatch = href.match(/list=([a-zA-Z0-9_-]+)/);

        if (videoIdMatch && !playlistIdMatch) {
            var videoId = videoIdMatch[1];
            var embedUrl = 'https://www.youtube.com/embed/' + videoId + "?autoplay=1";
            var thumbnailUrl = 'https://img.youtube.com/vi/' + videoId + '/hqdefault.jpg';
            var thumbnail = `
                <a href="#" class="open-popup" data-video="${embedUrl}">
                    <div class="video-thumbnail" style="background: url('${thumbnailUrl}') center/cover no-repeat; width: ${ancho}; height: ${alto};">
                        <div class="play-button"></div>
                    </div>
                </a>
            `;
            jQuery(this).replaceWith(thumbnail);
        } else if (playlistIdMatch) {
            var playlistId = playlistIdMatch[1];
            var embedUrl = 'https://www.youtube.com/embed?listType=playlist&list=' + playlistId + "&autoplay=1";
            var thumbnailUrl = 'https://img.youtube.com/vi/' + videoIdMatch[1] + '/hqdefault.jpg';
            var thumbnail = `
                <a href="#" class="open-popup" data-video="${embedUrl}">
                    <div class="video-thumbnail" style="background: url('${thumbnailUrl}') center/cover no-repeat; width: ${ancho}; height: ${alto};">
                        <div class="play-button"></div>
                    </div>
                </a>
            `;
            jQuery(this).replaceWith(thumbnail);
        }
    });

    // OK.ru
    jQuery('.post-content a[href*="ok.ru/video/"], .block-content a[href*="ok.ru/video/"], .post a[href*="ok.ru/video/"]').each(function () {
        var href = jQuery(this).attr('href');
        var videoIdMatch = href.match(/video\/(\d+)/);
        var playlistMatch = href.match(/playlist=([\w-]+)/);

        if (videoIdMatch && !playlistMatch) {
            var videoId = videoIdMatch[1];
            var embedUrl = 'https://ok.ru/videoembed/' + videoId + "?autoplay=1";
            var thumbnailUrl = 'https://ok.ru/dk?st.cmd=videoPreview&uid=' + videoId;

            var thumbnail = `
                <a href="#" class="open-popup" data-video="${embedUrl}">
                    <div class="video-thumbnail" style="background: url('${thumbnailUrl}'), url('${defaultThumbnail}') center/cover no-repeat; width: ${ancho}; height: ${alto};">
                        <div class="play-button"></div>
                    </div>
                </a>
            `;
            jQuery(this).replaceWith(thumbnail);
        } else if (playlistMatch) {
            var playlistId = playlistMatch[1];
            var embedUrl = 'https://ok.ru/videoembed?playlist=' + playlistId + "&autoplay=1";
            var thumbnailUrl = 'https://ok.ru/dk?st.cmd=videoPreview&uid=' + playlistId;

            var thumbnail = `
                <a href="#" class="open-popup" data-video="${embedUrl}">
                    <div class="video-thumbnail" style="background: url('${thumbnailUrl}'), url('${defaultThumbnail}') center/cover no-repeat; width: ${ancho}; height: ${alto};">
                        <div class="play-button"></div>
                    </div>
                </a>
            `;
            jQuery(this).replaceWith(thumbnail);
        }
    });

    // Dailymotion
    jQuery('.post-content a[href*="dailymotion.com/video/"], .block-content a[href*="dailymotion.com/video/"], .post a[href*="dailymotion.com/video/"], .post-content a[href*="dailymotion.com/playlist/"], .block-content a[href*="dailymotion.com/playlist/"], .post a[href*="dailymotion.com/playlist/"]').each(function () {
        var href = jQuery(this).attr('href');
        var videoIdMatch = href.match(/video\/([^?]+)/);
        var playlistIdMatch = href.match(/playlist\/([^?]+)/);

        if (videoIdMatch && !playlistIdMatch) {
            var videoId = videoIdMatch[1];
            var embedUrl = 'https://www.dailymotion.com/embed/video/' + videoId + "?autoplay=1";
            var thumbnailUrl = 'https://www.dailymotion.com/thumbnail/video/' + videoId;

            var thumbnail = `
                <a href="#" class="open-popup" data-video="${embedUrl}">
                    <div class="video-thumbnail" style="background: url('${thumbnailUrl}') center/cover no-repeat; width: ${ancho}; height: ${alto};">
                        <div class="play-button"></div>
                    </div>
                </a>
            `;
            jQuery(this).replaceWith(thumbnail);
        } else if (playlistIdMatch) {
            var playlistId = playlistIdMatch[1];
            var embedUrl = 'https://www.dailymotion.com/embed/playlist/' + playlistId + "?autoplay=1";
            var thumbnailUrl = defaultThumbnail2;

            var thumbnail = `
                <a href="#" class="open-popup" data-video="${embedUrl}">
                    <div class="video-thumbnail" style="background: url('${thumbnailUrl}') center/cover no-repeat; width: ${ancho}; height: ${alto};">
                        <div class="play-button"></div>
                    </div>
                </a>
            `;
            jQuery(this).replaceWith(thumbnail);
        }
    });

    // نافذة الفيديو
    jQuery(document).on("click", ".open-popup[data-video]", function (e) {
        e.preventDefault();
        var videoSrc = jQuery(this).data("video");
        jQuery("#videoFrame").attr("src", videoSrc);
        jQuery("#videoPopup").fadeIn().css("display", "flex");
    });

    // إغلاق الفيديو
    jQuery(document).on("click", ".close-popup, .popup-overlay", function (e) {
        if (e.target.classList.contains("popup-overlay") || e.target.classList.contains("close-popup")) {
            jQuery("#videoPopup").fadeOut();
            jQuery("#videoFrame").attr("src", "");
        }
    });

    // ملء الشاشة
    jQuery(document).on("click", "#fullscreenBtn", function () {
        var popupContent = document.querySelector(".video-popup-content");
        if (!document.fullscreenElement) {
            popupContent.requestFullscreen();
        } else {
            document.exitFullscreen();
        }
    });

    // زر إغلاق يظهر عند تمرير الماوس
    document.addEventListener("DOMContentLoaded", function () {
        const popupContent = document.querySelector(".popup-content");
        const closeButton = document.querySelector(".close-popup");
        closeButton.style.display = "none";

        popupContent.addEventListener("mouseover", function () {
            closeButton.style.display = "block";
        });

        popupContent.addEventListener("mouseout", function () {
            setTimeout(function () {
                closeButton.style.display = "none";
            }, 3000);
        });
    });

    // تنسيق CSS
    jQuery("head").append(`
        <style>
        .popup-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.85); display: none;
            justify-content: center; align-items: center; z-index: 1000;
        }
        .popup-content {
            position: relative; background: #1e1e1e; padding: 20px;
            border-radius: 10px; text-align: center;
        }
        .close-popup {
            position: absolute; top: 10px; right: 15px;
            font-size: 28px; color: #fff; cursor: pointer;
        }
        .video-thumbnail {
            position: relative; cursor: pointer;
            border-radius: 15px; transition: transform 0.3s ease;
        }
        .video-thumbnail:hover {
            transform: scale(1.05);
        }
        .play-button {
            position: absolute; top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            width: 80px; height: 80px;
            background: url('https://i.servimg.com/u/f36/18/22/98/96/image210.png') no-repeat center;
        }
        .video-popup-content {
            width: 80%; max-width: 730px; height: 410px;
            border-radius: 15px; background: rgba(30, 30, 30, 0.9);
            position: relative; box-shadow: 0 0 25px rgba(0, 0, 0, 0.8);
        }
        #videoFrame {
            border-radius: 15px; width: 100%; height: 100%; border: none;
        }
        @media (max-width: 480px) {
            .video-thumbnail {
                max-width: 100%;
            }
        }
        </style>
    `);
});

/* ==========================================================
   ❖ نهاية كود التصميم بواسطة جاك سبارو ⚓
   ❖ https://zx303.blogspot.com/ | مدونة القرصان
   ========================================================== */

هام!: لكي يعمل، يجب عليك تحديد إصدار المنتدى الخاص بك
من خلال تعديل الجزء التالي من الكود

صندوق الكود

// تحديد النسخة الحالية للمنتدى
var currentServer = 'AwesomeBB';

استبدل كلمة AwesomeBB باسم نسخة منتداك

,"phpBB2" "phpBB3" "PunBB" "Invision" "ModernBB"

ملاحظة هامة حول تفعيل كود عرض الرسائل في نافذة منبثقة في النسخة الأخيرة AwesomeBB من أحلى منتدى؟

إذا كنت تواجه مشكلة في عدم عمل كود الرسائل بشكل صحيح، يرجى اتباع الخطوات التالية لإصلاحها:

انتقل إلى لوحة الإدارة في المنتدى.
اذهب إلى: مظهر المنتدى > التومبيلات والقوالب.
ابحث عن قالب overall_header، ثم اضغط على تعديله.
انتقل إلى أسفل القالب وأضف الكود التالي:
احفظ القالب ثم انشره.

صندوق الكود

<div class="navbar navlinks {NAVBAR_BORDERLESS}" style="display: none;">
   {GENERATED_NAV_BAR}
</div>

بعد تطبيق هذه الخطوات، سيعمل كود الرسائل بشكل صحيح دون أي مشاكل.

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

آخر الأخبار

كود عرض مقاطع الفيديو وفتح الصور والروابط في نافذة منبثقة + إشعار بالرسائل الجديدة







عن القرصان جاك سبارو

التعليقات

آخر الأخبار

كود عرض مقاطع الفيديو وفتح الصور والروابط في نافذة منبثقة + إشعار بالرسائل الجديدة







عن القرصان جاك سبارو

شاهد أيضاً

التعليقات