تفعيل خاصية colorbox - الصندوق الضوئي لمدونات بلوجر

السلام عليكم ..

خاصية colorbox هي من أكتر الخصائص التي تعطي الموقع أو المدونة جادبية واحترافية وأناقة كبيرة .. هذه الخاصي مضمنة إفتراضية في مدونات بلوجر لعرض الصور فقط ..

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

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

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

<!--Start bloggxp.com code--> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'/> <script src='https://cnmu.googlecode.com/svn/trunk/ColorBox/colorbox.js' type='text/javascript'/> <link href='https://cnmu.googlecode.com/svn/trunk/ColorBox/style5/colorbox.css' media='screen' rel='stylesheet' type='text/css'/> <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> <!--End bloggxp.com code-->

 

هناك خطوة أخرى علينا القيا بها من الإعدادا وهي إلغاء العرض المبسط ..

قم بالدخول لإعدادات مدونتك .. تم مشاركات وتعليقات .. تم طبق الموجود بالصورة التالية  :

الآن الأداة جاهزة للإستخدام :

طريقة الإستخدام :

<a "bloggxp" href="#" title="XXXXX">Text</a>

<a "bloggxp" href="#" title="XXXXX"><img src="@" width="200" height="150"/></a>

السطر الأول هو لإضافة ما تريد في الخاصي داخل رابط كتابي.

والسطر التاني هو لإستخدام صورة وليس كتابة .

الآن سأشرح مكونات السطرين وهما متساويين تقريبا مع إختلاف طفيف:

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

هذا # عليك تغييره برابط ما تريد عرضه في الخاصية متلا رابط فيديو أو صورة .. إلخ ..

هذا text غيره بعنوان مناسب وعند الضغط عليه يفتح الصندوق الضوئي .

و @ في السطر التاني لها نفس المهمة فقط في هذه الحالية عليك وضع رابط الصورة التي تريد أن تظهر وعند الضغط عليها يفتح الصندوق الضوئي .

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

الآن نأتي لجدول المعرفات التي تحدتنا عنها وهذه المعرفات عليك وضعها مكان bloggxp في السطر حسب نوع ما تريد أن تعرضه في الخاصية .

صور مترابطة   :   "rel="images

سلايد شو   :    "rel="slideshow

صور بمقاس تابت   :  "rel="imagessamesize

فيديو  :  "class="cbvideo

آى فريم صغير   :  "class="cbiframe

آى فريم كبير   :  "class="bcbiframe

وهذا مثال سأطبقه على فيديو وشاهد التغييرات التي حدتت على الكود :

<a class="cbvideo" href="http://www.youtube.com/embed/fplXTlWdNCI" title="هدف فان بيرسي الخرافي ">اضغط هنا لرؤية الفديو</a>

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

تنبيه : 

بخصوص روابط الفيديوهات التي تريد أن تعرضها في الخاصية لا يجب أن تضع الرابط كاملا 

فمتلا هذا رابط فيديو كامل مباشر من اليوتيب :

https://www.youtube.com/watch?v=fplXTlWdNCI

ما يجب عليك فعله هو أخد معرف الفيديو وهو آخر الحروف الموجودة وراء علامة تساوي = ووضعها مكان كلمة VID في الرابط التالي :

http://www.youtube.com/embed/VID

ونفس الشيء بالنسبة لمواقع الفيديوهات الأخرى كفيمو ودايلي موشن ..

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