تفعيل واستخدام خاصية Colorbox في مدونات بلوجر

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

معاينة

أولا تثبيت الإضافة عبر اضافة الكود التالي فوق الوسم </head>

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://cnmu.googlecode.com/svn/trunk/ColorBox/colorbox.js" type="text/javascript"></script>
<link href="https://cnmu.googlecode.com/svn/trunk/ColorBox/style5/colorbox.css" media="screen" rel="stylesheet" type="text/css"></link>
<script>
$(document).ready(function(){
$('a[href$=gif]').colorbox();
$('a[href$=jpg]').colorbox();
$('a[href$=png]').colorbox();
$('a[href$=jpeg]').colorbox();
$('a[href$=bmp]').colorbox();
$('a[href$=JPG]').colorbox();
$('a[href$=JPEG]').colorbox();
$("a[rel='images']").colorbox({transition:"fade"});
$("a[rel='slideshow']").colorbox({slideshow:true});
$(".cbiframe").colorbox({width:"800", height:"600", iframe:true});
$(".bcbiframe").colorbox({width:"100%", height:"100%", iframe:true});
$(".cbvideo").colorbox({iframe:true, innerWidth:640, innerHeight:480});
$("a[rel='imagessamesize']").colorbox({transition:"none", width:"75%", height:"75%"});
});
</script>

الكود الاحمر يمكنك ازالته ان كان لديك مكتبة جي كويري في القالب
لكن هناك خطوة في الإعدادات يجب عملها وهي اغلاق الخاصية المدمجة في بلوجر وذلك عبر كالتالي

1. من الإعدادات
2. نختار مشاركات وتعليقات
3. ثم نحدد الخيار لا من جانب عرض الصور في العرض المبسط

 الآن ننتقل لمرحلة الإستخدام

تعتمد الإضافة على الروابط فكل ما تحتاج معرفته هو هاذين الكودين

<a "cnmu" href="#" title="XXXXX">Text</a>
<a "cnmu" href="#" title="XXXXX"><img src="*" width="200" height="150"/></a>

السطر الأول هو لإضافة ما تريد في الخاصية داخل رابط كتابي
السطر الثاني هو ان اردت استخدام صورة وليس كتابة
شرح السطرين تقريبا متساوي مع اختلاف بسيط تابع معي
هذا "cnmu" سنسميه المعرف وسأريك طريقة تغيره بحسب الحالة التي تريدها سواء اردت فديو او صور او رابط
 هذا # ستستبدله بالرابط سواء كان فديو الخ
 اما هذا XXXXX ستستبدله بجمله توضيحة ستظهر في أسفل الصندوق
هذه Text الكلمة تستبدلها بما تريد وهي التي عند الضغط عليه سيفتح الصندوق الضوئي
توازيها * علامة في السطر الثاني وهي تستبدل برابط الصورة التي عند الضغط عليها يفتح الصندوق
اما الرقم 200 هو عرض الصور والرقم 150 هو ارتفاعها

الآن سننتقل للمعرف كل ما عليك استبدال المعرف بالمعرف الذي تريد استخدامه كما في الجدول التالي

الفعل او الناتج	المعرف
صور مترابطة	rel="images"
سلايد شو	rel="slideshow"
صور بمقاس ثابت	rel="imagessamesize"
فديو	class="cbvideo"
آى فريم صغير	class="cbiframe"
آى فريم كبير	class="bcbiframe"

مثال ساطبقه لإضافة فديو يفتح بالخاصية شاهد التعديلات التي حدثت على الكود

<a class="cbvideo" href="http://www.youtube.com/embed/0ixZpsNiJl0" title="سورة التكوير بصوت الشيخ ماهر المعيقلي">اضغط هنا لرؤية الفديو</a>

اضغط هنا لرؤية الفديو

ملاحظة : بخصوص روابط الفديو يجب ان تراعي ان يكون الرابط هو رابط مباشر للمشغل أو ما يسمى embed
كل موقع سيكون في اسفل الفديو طريقة وضعه في مشغل كاليوتيوب مثلا في خانة المشاركة أو Share ستجد جزء خاص لوضع الفديو في موقعك نحتاج فط منه الرابط وحتى لا تدخل في كثير من الإشكاليات
هذه روابط لاهم مواقع الفديو يوتيوب ودايلي موشن وفيمو
http://www.youtube.com/embed/VID
http://www.dailymotion.com/embed/video/VID
http://player.vimeo.com/video/VID
كل ما عليك هو ان تستبدل VID برقم الفديو في الموقع كما فعلت أنا ووضعت هذا الرقم 0ixZpsNiJl0
وستجد الرقم عادة في عنوان المتصفح في صفحة الفديو

ملاحظة أخرى  : بالنسبة للصور العادية انت لا تحتاج اضافة اى معرفات او اى شئ هي ستعمل تلقائياً
اما بالنسبة للصورة التي في السلايد شو او بمقاس ثابت او مترابطة كل ما عليك ان تطبق عليها نفس المعرف
يعني مثلا لو ستصنع 20 صورة سلايد شو يجب ان يكون لديهم جميعا هذا المعرف rel="slideshow"
ان كانت واحده بدونه فلن يتم احتسابها ولعمل عشرين صورة هو ان تكرر عملية الرابط 20 مرة أو 10 او اى عدد تحب نفس الشئ مع باقي الأجزاء كلما اردت رابط اضافي كرر العملية
اتمنى ان يكون الشرح واضح واستخدام موفق تحياتي

المحتويات والمعلومات في هذا الموضوع قديمة أول لمشكلة تم حلها

العودة للرئيسية متابعة القراءة