كيف تستخدم jQuery Colorbox مع معرض صور ووردبريس

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

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

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

ما نريده هنا هو أن يتم عرض الصور بالحجم الكامل في نفس الصفحة دون الانتقال إلى صفحة أخرى و ذلك باستخدام 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 في فلكر
#

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