26/07/15 4.7 ألف

يعد Fancybox for WordPress مكونًا إضافيًا مثيرًا للاهتمام لإطار عمل jQuery والذي يسمح لك بإنشاء مشاريع جميلة ومريحة بسرعة. فهو يسمح لك بتكبير صورة على موقع ويب دون الانتقال إلى صفحة فارغة، بالإضافة إلى "ربط" الصور في معرض واحد. من الممكن أيضًا تمرير المعرض باستخدام عجلة الماوس. بالإضافة إلى ذلك، يفتح Fancybox نافذة مشروطة يمكنك من خلالها عرض النص ورسوم swf المتحركة وما إلى ذلك بسهولة:

ما هو فانسي بوكس؟

على أساس فانسي بوكس جافا سكريبت مسجهي أداة تسمح لك بتوسيع وتحسين وظائف الصور وعناصر الوسائط المتعددة ومحتوى HTML على صفحات الويب. البرنامج المساعد لديه خطوه سهلهواتصال مريح:

تعليمات التحميل:

قم بتنزيل البرنامج المساعد Fancybox واستخرجه. بعد ذلك، انسخ الملفات التي تتضمن البرنامج النصي والأنماط. تأكد من أن لديك JS، ملفات CSSعلى الخادم وتكوين المسارات في البرامج النصية. تحقق من تحميل مكتبة JQuery.

أمثلة التثبيت Fancybox-1.3.4

قم بتنزيل jquery.fancybox-1.3.4.zip، وقم بفك ضغط الأرشيف وتثبيته في مجلدك jquery.fancybox-1.3.4. بالداخل نجد مجلد Fancybox ونقوم بتحميله على الخادم. على سبيل المثال، في /wp-content/plugins/. يجب أن يظهر محتواه هنا - site.ru/wp-content/plugins/fancybox/.

وظيفة my_css() ( echo ""."n"; ) add_action("wp_head", "my_css", 5); إذا (!is_admin()) ( wp_enqueue_script("fancybox", "/wp-content/plugins/fancybox/jquery.fancybox-1.3.4.js", "jquery", "1.3.4"); )

$(document).ready(function())($("a:has(img)").fancybox(("hideOnCotentClick":true,"titleFromAlt": true,"titlePosition": "outside", "padding" : "5"، "الهامش": "25"))؛))؛

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

تحميل احدث اصداريمكن العثور على البرنامج المساعد هنا.

لماذا تحتاج فانسي بوكس؟

توجد اليوم "تكبيرات" مختلفة للصور، ولكن لكل منها عيوبه الخاصة. على سبيل المثال، فإن تطبيقَي Thinbox وLightbox يعملان على تغميق الخلفية، وهما كبيران جدًا وغير جذابين للغاية، وبالتالي لا يوفران "تأثير التكبير/التصغير". منذ وقت ليس ببعيد، أنشأ Cabel من Panic لعبة مثيرة للاهتمام إلى حد ما البرنامج المساعد FancyZoomومع ذلك، يبلغ وزنه أكثر من 150 كيلو بايت ويتم دفعه أيضًا.

كان ظهور FancyBox في هذه الحالة بمثابة معجزة حقيقية. أولاً، يستخدم المكون الإضافي jQuery، المضمن في تثبيت WordPress القياسي، وثانيًا، يزن 27 كيلو بايت فقط:

الملامح الرئيسية لبرنامج Fancybox

ل مزايا لا يمكن إنكارهاتشمل المكونات الإضافية ما يلي:

• القدرة على تحديد 1 من 3 تأثيرات لفتح/إغلاق صندوق به صورة؛
• القدرة على تحديد مربع في التراكب (وضع التراكب)؛
• تنفيذ معرض مصغر للصور على الصفحة؛
• القدرة على عرض المعرض عن طريق تمرير عجلة الماوس.
• القدرة على استخدام البرنامج المساعد لعرض الرسوم المتحركة فرنك سويسري والنص العادي في المربع؛
• القدرة على العمل في وضع iframe (يستخدم لفتح مورد آخر في صندوق).

خيارات Fancybox تجعل من السهل القيام بذلك الكون المثالىوالحصول على التأثير المطلوب.

الأصناف والإصدارات الرئيسية من Fancybox

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

في Fancybox 2 ستجد:

• مجموعة موسعة من الوظائف المساعدة؛
• القدرة على استخدام عروض الشرائح.
• استجابة عالية (يتم تغيير حجم النوافذ المنبثقة وفقًا لحجم نافذة المتصفح)؛
• تأثير جديد للانتقالات بين الصور في المعرض؛
• استخدام CSS3 (الزوايا الدائرية، والظلال، وما إلى ذلك)؛
• تحديث الإعدادات:

لماذا قد لا يعمل Fancybox؟

قد يكون هناك عدة أسباب لمشاكل البرنامج المساعد.

الأكثر شيوعا منهم هي:

• التعارض بين نصوص Fancybox النصية والنصوص الأخرى (على سبيل المثال، PrestaShop)؛
• التوفر أخطاء جافا سكريبتفي المتصفح؛
• خطأ في القالب.

لا يعمل Fancybox أيضًا نظرًا لأن المكون الإضافي محظور بواسطة جدار الحماية أو برنامج مكافحة الفيروسات أو أداة حظر الإعلانات.

المعلمات الأساسية لـ Fancybox

تؤثر معلمات Fancybox أو المفاتيح، كما يطلق عليها أيضًا، على تنفيذ مهام معينة. أنها تسمح لك بالعمل مع أنواع المحتوى مثل Ajax، فيديوهات يوتيوب , خرائط جوجل , فيديوهات فلاش swf، افتح المحتوى في iframe. يمكنك تغيير قيمها مباشرة في FancyBox JS:

إعداد فانسي بوكس

أكثر إعدادات مهمةيقع Fancybox for WordPress في علامات التبويب المظهر والرسوم المتحركة والسلوك. وبمساعدتهم، يمكنك التأكد من أن التصميم المرئي للصور يتوافق مع التصميم العام للموقع.

في علامة التبويب "المظهر"، يمكنك ضبط اللون وتشغيل إطار الصورة (الحدود). ضبط زر إغلاق النافذة بالصورة واختيار موضعها ولونها حشوةأنتجت في زر. اللون والشفافية والتظليل خلفيةيمكن تعديلها في خيارات التراكب. يمكنك تحديد لون وموقع العنوان في العنوان. أسهم التنقل - أسهم التنقل والتمرير.

يمكن ضبط سرعة الرسوم المتحركة وشفافية الصور في خيارات التكبير/التصغير في علامة التبويب الرسوم المتحركة. حدد تأثير التمدد أو التلاشي في نوع الانتقال. يتم اختيار قالب التأثيرات في Easing.

في علامة التبويب "السلوك"، يمكنك ضبط الصورة لتمتد تلقائيًا لتناسب الشاشة (تغيير الحجم التلقائي للملاءمة)، وكذلك تحديد طريقة إغلاق الصور (إغلاق باستخدام "Esc"، وإغلاق عند OverlayClick، وإغلاق عند ContentClick) وتكرارها عرض (المعارض الدورية).

يحتوي Fancybox على العديد من الإعدادات لأوضاع عرض الصور، وأنواع التسميات التوضيحية على الصور، وسرعة الصفحة، وما إلى ذلك.

دعونا نلقي نظرة على كيفية تكوين Fancybox:

• كيفية عرض الصورة؟

لضبط عرض الصورة، عليك كتابة الكود التالي:

$(document).ready(function() ( $(".single_image").fancybox(); ));

في href، يجب عليك تحديد المسار إلى الصورة، وفي اكتب معاينة.

• كيفية عرض مجموعة من الصور وتنفيذ معرض؟

في في هذه الحالةينبغي أن تضاف إلى السمة التي ستعكس قيمة أو أخرى لمجموعة منفصلة من الصور:

أ rel="group" href="images/111.jpg">

تحتاج إلى تحديد معلمات العرض:

$(document).ready(function() ( $("a").fancybox(( "transitionIn" : "none"، "transitionOut" : "none"، "titlePosition" : "over"، "titleFormat" : الوظيفة (title,currentArray,currentIndex,currentOpts) (return "Image " + (currentIndex + 1) + " / " +currentArray.length + (title.length ? " " + title: "") + ""; ) )); ));

إذا كنت بحاجة إلى حساب الصور في مجموعة معينةأو إظهار عنوان الصورة ورقمها، أكتب هذه المعلومات في العنوان .

• كيفية عرض المحتوى؟

يمكن استخدام البرنامج المساعد Fancybox لعرض المحتوى في نافذة مشروطة.

على سبيل المثال:

نص عرض المحتوى

بشكل افتراضي، يكون المحتوى مخفيًا - العرض: لا شيء . ولكن بمجرد أن ينقر المستخدم على الرابط، يبدأ عرض محتوى div بالمعرف المحدد في href:

$(document).ready(function() ( $("#content").fancybox(( "titlePosition" : "داخل"، "transitionIn" : "none"، "transitionOut" : "none" )); )) ;

كيفية تخصيص الخلفية والنافذة؟

في الميدان " الكشف التلقائي»يمكنك تحديد تنسيقات الملفات التي سيتم فتحها في FancyBox تلقائيًا.

يمكنك تكوين الرسوم المتحركة عند الفتح/الإغلاق في قسم "السلوك". للتمرير عبر الصور باستخدام الماوس، حدد المربع "تمكين البرنامج النصي لـ Mousewheel jQuery".

كيفية إعداد قوات الدفاع الشعبي؟

لن يظهر إعداد Fancybox هذا إلا إذا تم تنشيطه لملف PDF:

سيتم عرض مستند PDF في البرنامج المساعد بعد تحديد مربع الاختيار "الكشف التلقائي" وإضافة "fancybox-pdf" إلى رابط الملف:

رابط الملف المطلوب

كل ما هو مطلوب الآن هو وضع رابط لملف PDF على الموقع.

كيفية إعداد فيديو يوتيوب؟

عندما تنقر على رابط فيديو يوتيوب، سيظهر في نافذة منبثقة. ماذا تفعل إذا لم يعمل Fancybox for WordPress؟

هل قمت بتكوين البرنامج المساعد وإجراء كافة التغييرات، ولكن لا توجد نتيجة؟ هذا لا يعني أن Fancybox لـ WordPress لا يعمل. كل ما هو مطلوب منك هو مسح ذاكرة التخزين المؤقت أو إيقاف تشغيلها بالكامل طوال مدة التعديلات.

إذا حدث الخطأ "TypeError:$ ليس دالة"، فإن استبدال $ بـ jQuery سيساعد في حل المشكلة.

أسرار العمل مع Fancybox:

• إذا كان لديك بالفعل عرض مبسط مدمج، فقد يتسبب ذلك في حدوث تعارض مع Fancybox. في هذه الحالة، في إعدادات البرنامج المساعد، في قسم "الوسائط"، قم بإلغاء تحديد حقل "الصور" واحفظ التغييرات؛
• لا يوصى بتوصيل البرنامج الإضافي في قالب Chameleon، حيث تبدأ بعض ميزات القالب في العمل بشكل غير صحيح. علاوة على ذلك، فإن موضوع الحرباء لديه بالفعل عرض مبسط خاص به؛
• إذا تم تحديد "ملف الوسائط" في الإعدادات في قسم "الرابط"، فعند النقر فوق الصورة، سيتم فتح كل من الصورة الموجودة في Fancybox والمعرض في نفس الوقت. يمكن تجنب ذلك عن طريق ضبط القيمة على "صفحة المرفقات"؛
• يمكنك منع الصور من التحرك لأسفل عند تمرير الصفحة عن طريق إلغاء تحديد قسم السلوك من المركز عند موضع التمرير.

من خلال تثبيت Fancybox وتكوينه بشكل صحيح، يمكنك إنشاء معارض جميلة ومشاريع ناجحة بسرعة وسهولة.

جيد سيئ

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

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

التثبيت والإعدادات

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

وسائط- قائمة بجميع تنسيقات وأنواع الملفات المدعومة. بشكل افتراضي، يتم تضمين الصور فقط، ولكن يمكنك تضمين PDF وYouTube وVimeo وiFrames وغيرها.

تراكب— إعدادات خلفية الصفحة عند عرض الصور. يمكنك إزالته تمامًا أو تعيين اللون والشفافية الخاصة بك. تعطيل إغلاق الصورة عند النقر على الخلفية.

نافذة او شباك- كل ما يتعلق بمعلمات النافذة بالصورة نفسها. اللون والأبعاد والشفافية والإطار وما إلى ذلك.

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

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

وأخيرًا، إذا كانت الإمكانيات هنا تبدو قليلة، يقترح المؤلف شراء ملحق متميز للمكون الإضافي مقابل 10 يورو، مما سيضيف المزيد من الميزات.

الاستنتاجات

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

عموما، بسيطة جدا ومناسبة جدا ل الاستخدام الشاملتوصيل في

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

ملحق النافذة المشروط Easy FancyBox لملفات وسائط موقع WordPress

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

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

قم بتنزيل البرنامج المساعد وتثبيته

تثبيت البرنامج المساعد من لوحة إداريةالموقع، على علامة التبويب البرنامج المساعد → إضافةجديد. إذا لم يكن هذا التثبيت ممكنًا، فقم بتنزيل البرنامج الإضافي من الصفحة الرسميةتوصيل في: https://wordpress.org/plugins/easy-fancybox/، قم بفك الضغط وتحميله إلى دليل /plugins.

بعد تفعيل البرنامج المساعد، فإنه لا يظهر في وحدة التحكم على خط منفصل. يمكنك إدخال إعداداته من علامة التبويب الإضافات → Easy FancyBox → الإعداداتأو ملفات الوسائط.

التكامل العضوي لإعدادات Easy FancyBox في الاعدادات العامةملفات وسائط WordPress تأسر وتزيد من الثقة في البرنامج المساعد.

إعدادات البرنامج المساعد FancyBox سهلة

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

بعد تفعيل الإضافة، سيتم عرض جميع الصور (jpeg، png، gif) المُدرجة في المقالات في نوافذ مشروطة أعلى المقالة إذا:

• عند إدراج صورة، يتم توفير رابط لملف الوسائط، وليس إلى صفحة المرفقات؛
• تم تقليل حجم الصورة مقارنة بالحجم الأصلي.

يمكن تكوينها:

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

إعدادات البرنامج المساعد FancyBox سهلة

في الختام، تجدر الإشارة إلى أنه في إعدادات البرنامج الإضافي Easy FancyBox، يتم تضمين نوافذ مشروطة لمقاطع الفيديو من YouTube وDailymotion وVimeo و وثائق PDF، فرنك سويسري، SVG. يمكنك إنشاء iFrame لمورد آخر. ومع ذلك، هذه الخيارات هي فقط الإصدارات المحترفةمقابل 10 دولارات للمجال الواحد.

أهلاً بكم! اليوم سنتحدث إليكم عن مثل هذه القوة و اداة مفيدةمثل مكتبة FancyBox. يوفر هذا المكون الإضافي jQuery القدرة على إضافة نظام من النوافذ المنبثقة، والمعروف أيضًا باسم الصناديق المبسطة، والنوافذ المشروطة، والنوافذ المنبثقة، إلى صفحات موقع الويب. يحظى تنسيق النافذة المنبثقة بشعبية كبيرة في تطوير الويب ويستخدم لتحقيق أغراض مختلفة. تتيح لك المكتبة: فتح أكواد html وملفات txt والنماذج و رسائل المعلوماتمحتوى من مصادر أخرى باستخدام طلبات Ajax وتنفيذ البرامج النصية وتشغيل مقاطع الفيديو منها خدمات يوتيوبومقاطع فيديو فيميو وفلاش.

والطريقة الأكثر شيوعًا لاستخدام FancyBox على مدونة WordPress هي تكبير الصور، سواء كانت مفردة أو مدمجة في المعرض. يمكن العثور على أمثلة لتنفيذ جميع الخيارات المذكورة أعلاه على الموقع الرسمي للمكون الإضافي - Fancybox.net. وفي هذه المقالة سننظر في كيفية دمج المكتبة بسهولة في مدونتنا باستخدام المكونات الإضافية FancyBox For WordPress وEasy FancyBox وإعداد إعداداتها الأساسية. سنتعلم أيضًا كيفية ربط FancyBox بـ WordPress بدون مكون إضافي.

FancyBox For WordPress: عرض الصور والمعارض بشكل جميل

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

للتخلص من هذا الإزعاج وتحسين عملية عرض الصور على مدونة WordPress، تم تطوير مكون إضافي خاص FancyBox For WordPress. إنه يعمل على تمكين الزائر من النقر على الصورة وفتحها أعلى النوافذ الأخرى. مثله:

لنقم بتثبيت البرنامج الإضافي لموقعنا من مستودع WordPress.

نقوم بتنشيط FancyBox لـ WP ويبدأ العمل على الفور، وتطبيقه الإعدادات الأساسية. يمكننا التحقق من ذلك بالانتقال إلى مدونتنا وتحديثها والنقر على أي من الصور المتاحة.

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

إذا لم يعمل FancyBox For WordPress، أو بالأحرى الصور غير قابلة للنقر، فتحقق مما إذا كانت إعدادات عرض الملف مضبوطة بشكل صحيح عند تحديد صورة لتحميلها في المحرر. يجب تعيين حقل الارتباط على الوسائط.

بالإضافة إلى الخيارات المحددة مسبقًا، من المتوقع المزيد إعدادات مرنةفانسي بوكس ​​للووردبريس. يمكننا العثور عليها في وحدة التحكم VI، في عنصر القائمة "الإعدادات" - "FancyBox for WP". بالضغط على الرابط نرى عدد كبير منعلامات التبويب المسؤولة عن تحرير معلمات معينة. ترتبط بشكل أساسي بتغيير مظهر الصور. لسوء الحظ، البرنامج المساعد هو بالكامل باللغة الإنجليزية. ولكن الآن سوف ننظر إلى كل شيء أكثر من ذلك نقاط مثيرة للاهتمام، والتي قد تحتاجها إذا كانت الإعدادات الافتراضية لا تلبي احتياجاتك.

علامة تبويب البداية هي "المعلومات". فيما يلي روابط لمعلومات حول المطورين والمنتج ككل. يقول منشئو البرنامج المساعد أنه إذا كنت لا ترغب في الخوض في جميع الإعدادات المقترحة، فحتى بدون هذا الإصدار الأساسي من الإعدادات يعطي نتيجة جذابة إلى حد ما. يطلبون منك أيضًا الانتباه إلى حقيقة أنه إذا لم تلاحظ التغييرات فورًا بعد التحرير، فهذا لا يعني غالبًا أن FancyBox For WordPress لا يعمل. إذا كان لديك مكون إضافي للتخزين المؤقت مثبتًا، على سبيل المثال، فستحتاج إلى مسح ذاكرة التخزين المؤقت بعد حفظ التغييرات أو إلغاء تنشيط المكون الإضافي أثناء العمل مع الإعدادات.

علامة التبويب التالية هي "المظهر". هذه هي الصفحة التي يمكننا تخصيصها الخيارات الأساسيةالمسؤول عن ظهور النوافذ المنبثقة. إذا تم تحديد خانة الاختيار، فسيتم تمكين الوظيفة، وإذا لم يكن الأمر كذلك، فسيتم تعطيلها:

• "الحدود" - اختر ما إذا كان سيتم عرض الإطار حول النافذة المشروطة. الافتراضي هو لا. إذا اخترنا الخيار "نعم"، يظهر حقل إضافي لتحديد لون الحدود، بالتنسيق الست عشري (#000000). توجد طريقة لضبط عرض الإطار؛
• "زر الإغلاق" - نحدد ما إذا كان الصندوق المبسط سيحتوي على زر لإغلاق النافذة (علامة متقاطعة) ومكان وجوده (يسار (يسار) / يمين (يمين) / أسفل (أسفل) / أعلى (أعلى)). قيمة البداية - أعلى اليمين؛
• "الحشو" - هذا العنصر مسؤول عن ضبط لون وعرض الحشو في FancyBox For WordPress من حافة النافذة المنبثقة إلى الصورة الموضوعة فيها. القيمة الافتراضية هي الأبيض، 10 بكسل؛
• "خيارات التراكب" - قم بتعيين خصائص خلفية التعتيم التي تظهر أسفل الصورة المنبثقة، والتي تغطي محتوى الصفحة بأكملها. تم تعريفه في البداية: كاللون – الرمادي، كالشفافية (التعتيم) – 0.3. تتراوح قيمة خاصية الشفافية من 0.0 إلى 1.0، وكلما انخفضت القيمة، أصبحت الخلفية أكثر شفافية. وفقًا لذلك، إذا كنت تريد إخفاء المحتوى المتبقي خلف النافذة المشروطة تمامًا، فيمكنك تحديد العتامة: 1;
• "العنوان" - نقوم بتعيين ما إذا كان سيتم عرض التسمية التوضيحية للصورة (أي قيمة السمة صور العنوان) وكيف. هنا يمكنك تكوين موقع العنوان بالنسبة إلى مساحة النافذة المنبثقة (داخل/خارج/فوق) ولونها. في القيمتين "داخل" و"خارج"، سيتم وضع النص في الهامش السفلي للنافذة المشروطة وأسفلها، على التوالي. وعندما تحدد خيار "Over"، سيكون العنوان موجودًا أعلى المسافة البادئة السفلية، أعلى الصورة نفسها على خلفية شفافة داكنة؛
• "أسهم التنقل" - اختر ما إذا كنت تريد إظهار أسهم التنقل أم لا. تظهر عندما تقوم بالتمرير فوق الصورة.

انتقل إلى علامة التبويب "الرسوم المتحركة". سنقوم هنا بتكوين الوظائف المسؤولة عن التحكم في الرسوم المتحركة للنوافذ المنبثقة:

يرجى ملاحظة أنه لا يمكن تطبيق هذه الإعدادات إلا على تلك النوافذ المشروطة التي يتم فتحها/إغلاقها والتي تم تعيين معلمة "نوع النقل" الخاصة بها على القيمة المرنة.

بعد الحقول الفعلية مع إعدادات التخفيف، يدعونا مؤلفو FancyBox For WP إلى اتباع الروابط ومعرفة كيفية عمل خيارات وظيفة التخفيف التي يقترحونها. (الرابط الأول ل هذه اللحظةغير متاح.)

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

علامة التبويب الخامسة هي "المعارض". هذا مستوى متقدم من الإعدادات فيما يتعلق بمعارض الصور:

• "قم بإنشاء معرض لجميع الصور الموجودة على الصفحة(افتراضي)" - إنشاء معرض لجميع الصور الموجودة على الصفحة (افتراضي). وهذا هو، إذا كان هناك العديد من الصور على الصفحة، فسيتم دمجها بشكل افتراضي في المعرض بواسطة البرنامج المساعد. ونتيجة لذلك، فتح في نافذة مشروطةأي واحد منهم، يمكننا عرض كل الآخرين من خلال التمرير عبر الصور؛
• "لا تقم بتجميع الصور في المعرض تلقائيًا (استخدم هذا إذا انت تريدلإنشاء المعارض يدويًا باستخدام relالسمة)" - لا تقم بدمج الصور تلقائيًا في المعرض (استخدم هذا الخيار إذا كنت تريد إنشاء معرض يدويًا باستخدام سمة rel). أقترح أن أتعلم بمزيد من التفصيل كيفية استخدام خيار FancyBox For WordPress هذا عمليًا.

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

افتح الآن المنشور المطلوب في المحرر وانتقل إلى وضع "النص"، أي الوضع الذي يتم فيه عرض كود html. ابحث عن المجموعة الأولى من الصور وجميع الروابط (tag أ)، حيث يتم تغليف كل صورة (tag img)، قم بتعيين سمة ذات قيمة معينة هي نفسها للجميع. على سبيل المثال: rel = "gal1".

بالنسبة للمجموعة الثانية من ملفات الوسائط، كرر نفس الخطوات، ولكن بقيمة rel مختلفة، على سبيل المثال: rel = "gal2";

• "قم بإنشاء معرض لكل مشاركة (لن يعمل إلا إذا كان المظهر الخاص بك يستخدم فصل = « بريد» في كل مشاركة، وهو أمر شائع في WordPress)" - إنشاء معرض لكل مشاركة (لن يعمل إلا إذا كان القالب الخاص بك يستخدم فئة "النشر" لكل مشاركة، وهو أمر نموذجي لـ WordPress)؛
• "استخدم تعبيرًا مخصصًا لتطبيق FancyBox" - قم بتطبيق تعبير jQuery مخصص لتكوين FancyBox For WordPress في حالة عدم ملاءمة الخيارات التي يقدمها البرنامج الإضافي لك وتحتاج إلى إعدادات فردية أكثر مرونة. من الأفضل عدم استخدام هذا الخيار.

ومن الأفضل أيضًا عدم تعديل علامات التبويب التالية؛ فهي ستكون مفهومة ومفيدة فقط للمستخدمين المتقدمين.

أنا متأكد من أن جميع التعليمات المذكورة أعلاه ستكون كافية لك لدمج FancyBox For WordPress بنجاح في مدونتك لعرض الصور بشكل فعال في نافذة منبثقة.

ولكن لا يسع المرء إلا أن ينتبه إلى حقيقة أن شكاوى المستخدمين تظهر بشكل دوري على الإنترنت حول ثغرة أمنية في المكون الإضافي، مما يؤدي إلى إصابة المواقع بالفيروسات حتى بدون الوصول إلى منطقة إدارة WordPress والاستضافة. إذا واجهت مشكلة اختراق مورد الويب الخاص بك، فمن المهم إصلاحها في أسرع وقت ممكن. أريد أن أقدم لك الخيار البديللعرض الصور في صناديق الضوء. وبعد ذلك سوف نتعرف على البرنامج المساعد الذي يعد المنافس الرئيسي لـ FancyBox for VIs. هذا هو ما يتم استخدامه على صفحات مدونتي.

Easy FancyBox: الميزات الرئيسية للبرنامج المساعد

مثل المكون الإضافي السابق، يبدأ Easy FancyBox for WordPress في العمل فورًا بعد ذلك التثبيت القياسيعلى نظام إدارة المحتوى فيما يتعلق بجميع الصور. إذا كنت ترغب في تخصيص الإعدادات "لنفسك"، فستجد على الصفحة الموجودة على العنوان الموجود في وحدة التحكم "الإعدادات" - "ملفات الوسائط" خيارات متطابقة تقريبًا مع خيارات FancyBox الخاصة بـ WordPress.

الاختلافات المميزة لها هي:

أو، في إعدادات البرنامج المساعد، في كتلة "المعرض"، في حقل "المعرض التلقائي"، حدد "الكل في معرض واحد"؛

أي عيوب كبيرةلم يتم الكشف عن البرنامج المساعد. ولكن إذا كان قالب VI الخاص بك يحتوي على عرض مبسط "أصلي" مدمج فيه، فهناك احتمال كبير لحدوث تعارض وقد يتبين أن Easy FancyBox for WordPress لا يعمل. في هذه الحالة، فمن المنطقي الاتصال بالدعم.

دمج مكتبة FancyBox في WordPress بدون ملحقات

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

لتثبيت المكتبة، يمكن العثور على ملفات FancyBox وتنزيلها على موقعfancyapps.com/fancybox/. افتح المجلد في الدليل الذي تم فك ضغطه مصدرونسخ jquery.fancybox.cssو jquery.fancybox.js، ضعهم في مجلد ، والتي يجب إنشاؤها أولاً في جذر السمة.

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

1 2 3 4 5

// ورقة أنماط Fancybox. wp_enqueue_style( "fancybox-style" , get_template_directory_uri() . "/fancybox/jquery.fancybox.css" , array () , " " ) ; // البرنامج النصي فانسي بوكس. wp_enqueue_script( "fancybox-script" , get_template_directory_uri() . "/fancybox/jquery.fancybox.js" , array ( "jquery" ) , " " ) ;

// ورقة أنماط Fancybox. wp_enqueue_style("fancybox-style", get_template_directory_uri() . "/fancybox/jquery.fancybox.css", array(), " "); // البرنامج النصي فانسي بوكس. wp_enqueue_script("fancybox-script", get_template_directory_uri() . "/fancybox/jquery.fancybox.js", array("jquery"), " ");

ثم افتح ملف الموضوع للتحرير header.phpو في رأسقم بإجراء اتصال بوظيفة FancyBox:

1 2 3 4 5

$(document).ready(function())( $(".fancybox").fancybox(); ));

إليك مقطع فيديو حول إعداد Fancybox واستخدامه:

تعرفنا اليوم على البرنامج النصي المستخدم على نطاق واسع على مواقع الويب لعرض الصور بشكل جميل في الصناديق المبسطة. لتسهيل الاندماج في المدونة، تم تطوير العديد من المكونات الإضافية الخاصة. لقد ألقينا نظرة على بعض أكثرها شيوعًا: Easy FancyBox وFancyBox For WordPress، واكتشفنا كيفية عملهما وما هي الاختلافات بينهما. لقد تم اختبارها تجريبيا وتعمل بشكل موثوق. لفهم الأداة التي تناسب وظائفك بشكل أفضل، حدد المهام الرئيسية التي يجب أن تؤديها. لا فائدة من اختيار مكون إضافي ثقيل لاستخدام واحد أو اثنين فقط من خياراته في المستقبل.