ووردبريس

فتح واستخدام خاصية اللجتاونك في Elementor Pro بواسطة جافا سكريبت

إن استخدام Elementor Pro في بناء مواقع الويب يعتبر من الخيارات الشائعة بين المطورين والمصممين. واحدة من الميزات الرائعة التي يقدمها هذا النظام هي "lightbox" التي تتيح عرض المحتوى في نافذة منبثقة. في هذا المقال، سنستعرض كيفية فتح واستخدام lightbox المدمجة في Elementor Pro باستخدام JavaScript، إلى جانب بعض الحلول لمشكلات متعلقة بالرمز المحدد.

طريقة فتح واستخدام lightbox في Elementor Pro

عند العمل على موقع WordPress باستخدام Elementor Pro، قد تحتاج في بعض الأحيان إلى عرض محتوى معين في lightbox. عادة، يتم ذلك بطريقة سهلة عبر واجهة المستخدم، لكن هناك أوقات تحتاج فيها إلى استخدام JavaScript لتخصيص هذه العملية.

إضافة حدث النقر لتفعيل lightbox

لتنفيذ ذلك، يمكنك إضافة حدث click إلى عنصر معين داخل الصفحة. يمكنك البدء باستخدام الكود التالي:

jQuery(window).on('elementor/frontend/init', () => {
    document.addEventListener('click', function (e) {
        if (e.target.closest('#do-lightbox')) {
            const url = "https://www.google.com";
            openLightbox(url);
        }
    });
    const openLightbox = url => {
        elementorFrontend.utils.lightbox.showModal({
            type: 'iframe',
            url: url,
            modalOptions: {
                id: 'elementor-lightbox-' + Date.now(),
                entranceAnimation: 'zoomIn',
                exitAnimation: 'zoomOut',
                closeButton: true,
            },
        });
    };
});

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

تحليل الأخطاء الشائعة

عند تجربة تنفيذ هذا الكود، قد تلاحظ ظهور خطأ مثل "elementorFrontend.utils.lightbox.showModal is not a function". هذا الخطأ يعني أن الدالة المطلوبة غير متاحة في السياق الحالي. لذا، قد تتساءل عن كيفية الوصول إلى lightbox بشكل صحيح.

يمكن أن تكون هناك مشكلات تتعلق بتوقيت التحميل أو وجود الكود ضمن سياق غير مناسب. تأكد دائمًا من أن الكود قيد التنفيذ بعد تحميل جميع مكونات Elementor. يمكن القيام بذلك عبر تضمين الكود في hook مخصص كالتالي:

add_action('elementor/frontend/after_enqueue_scripts', function() {
    // إضافة كود JavaScript هنا
});

استخدام خيارات إضافية في lightbox

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

إن إتقان كيفية فتح واستخدام lightbox في Elementor Pro باستخدام JavaScript يمكن أن يكون له تأثير كبير على تجربة المستخدم في موقعك. باختصار، يمكن أن توفر lightbox وسيلة فعالة لعرض المحتوى دون الحاجة إلى تحميل صفحات جديدة، مما يسهل التنقل بين العناصر المختلفة.

باستخدام هذه الملاحظات ونصائح البرمجة، يمكنك استغلال قدرة lightbox المدمجة في نظام Elementor Pro بشكل كامل. تعتبر هذه الطريقة مثالية للمطورين الذين يسعون لإنشاء واجهات مستخدم تفاعلية وسلسة.

خاتمة

إن تسليم محتوى المستخدم بطريقة مريحة وسلسة هو أحد المعايير الأساسية في تصميم الويب الحديث. من خلال استخدام JavaScript لفتح واستخدام lightbox المدمجة في Elementor Pro، يمكنك تحسين التفاعل مع المستخدم وتحسين تجربة الزوار بشكل عام. لا تتردد في الاستفادة من هذه التقنية في مشاريعك القادمة.

احمد علي

متخصص في مجال تطوير وإدارة المواقع الإلكترونية، يتمتع بخبرة واسعة في التعامل مع منصات إدارة المحتوى، خاصة ووردبريس. يقدم أحمد حلولاً مبتكرة واستراتيجيات فعالة لتحسين أداء المواقع وتطوير تصميماتها بما يتناسب مع احتياجات المستخدمين. كما يتميز بقدرته على تبسيط المفاهيم التقنية وكتابة محتوى تعليمي يساعد الأفراد والشركات على تحسين تواجدهم الرقمي وتحقيق أهدافهم على الإنترنت.
زر الذهاب إلى الأعلى
Don`t copy text!