banner

في الكاتب: و مدرجة تحت التنصيف تلميحات سريعة.

بسم الله والحمدلله والصلاة والسلام على سيدنا رسول الله وعلى آله و صحبه و من والاه بإحسان إلى يوم الدين.

– يوفر ووردبريس إمكانية إضافة معرض صور في الصفحات أو التدوينات.

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

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

سنقوم إن شاء لله باستخدام إضافة jQuery Colorbox في قالب ووردبريس لصنع معرض صور يدعم تكبير الصور وبدون استخدام أي إضافة من إضافات وردبريس وسيتم التطبيق في قالب ووردبريس 2011 (twentyeleven) وهو القالب الافتراضي المُفعّل في إصدارة ووردبريس 3.5 .

قبل البدء علينا أن ننشئ معرض صور ، نفتح شاشة الإدارة ونختار تدوينة جديدة ثم نقوم بإختيار إضافة وسائط من الزر تحت حقل عنوان التدوينة:

إضافة معرض وسائط

ثم نقوم بإضافة صور من الجهاز أو من تلك الموجودة في مكتبة الصور :

إضافة ملفات وسائط

ثم نقوم بتحديد جميع الصور و الضغط على زر إنشاء معرض جديد والموجود في زاوية الشاشة اليسرى أسفل الشاشة :

إنشاء معرض الصور

ستظهر شاشة أخرى تعرض خيارات للصور (تغيير ترتيب عرض الصور وإضافة وصف لكل صورة) وأيضا خيارات للمعرض يسار الشاشة (تحديد عدد الأعمدة -يعني عرض الصور في عمودين ، ثلاثة.. الخ- وتحديد رابط الصورة).
نقوم باختيار 3 أعمدة ثم نختار من القائمة المنسدلة خيار “رابط لـ ملف الوسائط” ثم نختار زر إدراج المعرض :

إعدادات معرض الصور

بعد ذلك نكتب اي اسم للتدوينة ثم نقوم بنشرها من نافذة “نشر” والموجودة يسار الشاشة وذلك بالضغط على زر “نشر” ثم نقوم بعرض التدوينة من خلال رابط “مشاهدة التدوينة”والذي يظهر أعلى الشاشة.
نشر التدوينة

ستظهر التدوينة كالآتي و عند النقر على أي صورة قإنها ستنقلك ستقوم بعرض الصورة على المتصفح في صفحة منفصلة.

معرض الصور في التدوينة

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

استخدام jQuery Colorbox في المعرض :

سنقوم بوضع ملف jquery.colorbox.js في مجلّد js وملف colorbox.css في مجلّد inc .
ثم سنقوم بتضمين الملفيّن في ملف الترويسة header.php داخل وسم head وقبل إغلاق الوسم مباشرة:
(قبل ذلك سنقوم بتضمين ملف مكتبة jQuery لأنه ضروري لعمل الـ colorbox).

<link rel="stylesheet" href="<?php bloginfo("stylesheet_directory");?>/inc/colorbox.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="<?php bloginfo("stylesheet_directory");?>/js/jquery.colorbox.js"></script>


هناك أيضا ملفات صور تجدونها في مجلد images والموجود داخل مجلد الخاص بالـ colorbox ، أيضا يجب نسخ هذا المجلد و وضعه في مجلد inc الموجود في قالب twentyeleven .

تفعيل colorbox لعرض الصور :

لكي يعمل الـ colorbox بصورة صحيحة فإن الصورة المراد تكبيرها يجب أن تكون داخل عنصر anchor (أي وسم a).
.
للتوضيح أكثر لاحظ الآتي :
هذه هي طريقة استخدام الـ colorbox :

  $('.x').colorbox();
ويتم تطبيقه على :
<a class="x" href="مسار الصورة الكاملة">
    <img src="مسار الصورة المصغّرة"/>
</a>

لكن في حالتنا فإن الصور موجودة و الروابط موجودة..ونحتاج فقط لمعرفة class وسم الـ anchor الذي يحوي الصور و نضعه مكان ( x. ) الموجود في المثال أعلاه.

ولكن كيف سنعرفه؟
سنقوم بفتح كود الصفحة لمعرفة كيف سنصل للرابط و ذلك باستخدام أدوات تطوير قوقل كروم (أو ما يوازيها مثل Firebug في فايرفوكس أو Dragonfly في أوبرا ).

في نفس صفحة التدوينة سنقوم بالضغط بزر الفأرة الأيسر على أي صورة من المعرض ونختار Inspect Element .
سيظهر في النصف السفلي (أو الأيمن) من الشاشة نافذة تحتوي كود الصفحة الحالية.

الكود المظلل بالأزرق الخفيف هو وسم الصورة التي ضغطنا عليها بالفأرة:

كود الصورة

الآن نرصيد أن نصل للرابط باستخدام الجيكوري ولكن المشكلة هي أن العنصر (الرابط a) الذي يحتوي الصورة (لا يوجد فيه class) و لذلك سنستخدم العنصر الأعلى منه (dt) للوصول إلبه وهو الـ class الموجود فيه هو gallery-icon :
(يتم وضع الكود التالي بعد في ملف header.php قبل وسم إغلاق head مباشرة)

<script>
$(function () {

  $(".gallery-icon a").colorbox(); /* دالة تفعيل الإضافة*/

});
</script>

نقوم بإغلاق أدوات التطوير ثم نقوم بإعادة تحميل الصفحة Refresh وذلك بالضغط على F5 .
ثم نقوم بتجربة المعرض مرة أخرى.. colorbox يعمل!!
معرض صور colorbox - غير مترابط

ولكن هناك مشكلة..كل صورة تعرض في صندوق colorbox على حدة وليست على شكل معرض مترابط ( أزرار التالي و السابق ومفاتيح يمين و يسار في لوحة المفاتيح للتنقل بين الصور ).

يوفر colorbox خيار أن تكون الصور مترابطة ولكن يجب أن يكون جميع وسوم الروابط التي تحوي الصور لها نفس الـ class لذلك سنقوم بإضافة التصنيف cbox يدوياً إلى الروابط :

$(".gallery-icon a").addClass('cbox');/* لتكون الصور مترابطة يجب أن يكون لها نفس التصنيف */

و سنقوم بتعديل طفيف على دالة تفعيل الـ colorbox حيث سنضيف خيار معرض الصور المترابطة كالآتي :

$(".gallery-icon a").colorbox({rel:'cbox'}); /* دالة تفعيل الإضافة*/

ليكون الكود بالكامل هو:

<link rel="stylesheet" href="<?php bloginfo("stylesheet_directory");?>/inc/colorbox.css">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script src="<?php bloginfo("stylesheet_directory");?>/js/jquery.colorbox.js"></script>

<script>
$(function () {
    $(".gallery-icon a").addClass('cbox');
    $(".gallery-icon a").colorbox({rel:'cbox'}); /* دالة تفعيل الإضافة*/

});

</script>

ثم نقوم بتجربة المعرض مرة أخرى :
معرض صور colorbox

تعمل بصورة جيدة!!

المصادر:
مكتبة jQuery Colorbox
الصور من Radhia-Dz في فلكر
#

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

wdalhaj

مصمم و مطور ويب حر..يعشق شرب القهوة السوداء.. يمكنكم متابعته على التويتر [email protected]

More Posts

8 Responses to “كيف تستخدم jQuery Colorbox مع معرض صور ووردبريس”

  1. حسن

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

    لدي بعض التعليقات على تدوينتكم المفيدة هذه:

    1. قمت باستخدام الدالة bloginfo(“stylesheet_directory”); في الكود الذي كتبته. بخصوص هذه الدالة فقد قرر فريق تطوير ووردبريس التخلي عنها منذ سنوات، يفضل استخدام echo get_template_directory_uri(); أو echo get_stylesheet_directory_uri(); عوضاً عنها. هي تعمل الآن بالتأكيد، لكن سيتم التخلي عنها نهائياً في إصدارات ووردبريس القادمة. الاحتياط واجب يا مان.

    2. إذا كان الغرض من استخدام الدالة أعلاه تضمين ملف سكربت للقالب (سواء كان ملف CSS أو JS) فيفضل على أي حال تضمين هذه الملفات بدالة wp_enqueue_style أو wp_enqueue_script على الترتيب تفادياً للمشاكل التي ربما تحصل مع سكربتات الإضافات الأخري المنصبة. خصوصاً بالنسبة لسكريبت jQuery فيفضل بشدة تضمينه باستخدام هذه الدالة عوضاً عن تكويده مباشرة في ملف الترويسة كما فعلت. بست براكتسس وكدة.

    3. على العموم أرى أنه من الأفضل استخدام إضافة Colorbox جاهزة (بواسطة مطور نشط يوفر تحديثات لها حسب الحوجة) بدلاً عن تضمين السكربتات يدوياً تفادياً لأي مشاكل محتملة. لكن لأي واحد منا تفضيلاته وخياراته.

    بالمناسبة، شايف الموقع حقل إجباري للتعليق، من الأفضل أن تجعله غير إجباري؛ ليس أي معلق لديه موقع إلكتروني.

    مشكور واظهر يا زول ما شايفنك!

    • wdalhaj

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

      الباشمهندس حسن مرحب بيك في جبنة لاب وحقيقة ملاحظلاتك (1 و 2) مفيدة جداً.. نحاول إن شاء الله مستقبلا نتّبع الطريقة المعيارية لكتابة كود ووردبريس.. بالنسبة لاستخدام إضافة Colorbox كلامك صحيح تماماً… بس الفكرة كانت توضيح إنو الحاجات في الووردبريس بسيطة وممكن تتعمل بدون إضافات لأنو أصبح من مقاييس التفاضل بين أنظمة إدارة المحتوى هو وجود إضافات. :)

      وجزاكم الله خيرا على المرور والتعليق ونتمنى ما تنقطع 😉

  2. عروض

    شكرا جزيلا علي الشرح المميز
    حقيقة كنت ابحث عن هذا الموضوع الي ان وجدته هنا
    اشكرك جزيل الشكر

  3. الخال

    مشكوووووور لك اخي لك جزيل الشكر فعلا موضوع رائع وانصح الجميع بقرائته لانه افادني في موقعي وانتضر جديدك يا بطل استمر

    • wdalhaj

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

      قمت بمراجعة الصفحة ولم أجد شيئاً.

      دمتم بود،،

أضف تعليقاً

  • (لن يتم نشره)