شاشة الإنتظار

لغة القالب

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

كن مدون
الاثنين, أكتوبر 13, 2014

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

العودة للرئيسية متابعة القراءة
JQuery 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 او اى عدد تحب نفس الشئ مع باقي الأجزاء كلما اردت رابط اضافي كرر العملية
اتمنى ان يكون الشرح واضح واستخدام موفق تحياتي

نظام التعليقات المتاح حالياً هو الخارجي وذلك بسبب تجارب أقوم بها حالياً على نظام التعليقات وسيعود النظام السابق في أقرب وقت ممكن

‏قال مدون محترف
شكرا لك اخي عمرو موضوع اكثر من رائع و شرح مفهوم و منسق =r
‏قال كن مدون
أخي الغالي منير اصبح مرورك جزء من الموضوع يا طيب فلا تحرمنا منه أبداً
شكراً لك =r
‏قال Ph Deyaa Slama
ممتاااااااااااز
‏قال Ph Deyaa Slama
سلام عليكم
لو سمحت
انا بعمل موقع للكلية بتاعتنا صيدلة
ومعايا موقع فيه محرك بحث قاموس للكلمات الصيدلية
انا كنت عايز احط محرك القاموس ده في مدونتي في صندوق زي محرك بحث جوجل
http://www.tbeeb.net/med/
بالله عليك تساعدني وهيكون ليك الثواب علما بان المدونة ليست للأرباح المدونة وانما للمنفعه العامة
‏قال كن مدون
وعليكم السلام ورحمة الله وبركاته
طبعا انا اتمنى لك التوفيق يا طيب
وحتى لو الموقع يعود منه ربح انا لا اجد مشكلة في تقديم ما استطيع طالما الامر لا يوجد به مخالفة للشريعة الإسلامية
بالنسبة لطلبك يا طيب الموقع الذي وضعته محرك البحث فيه مدمج به ولا ارى به خيار اضافته في موقع
بالتالي لا ينفع نقله لموقعك كما في جوجل
‏قال Ph Deyaa Slama
شكرا ليك انا الحمد لله عرفت اضيف القاموس للمدونة وشكرا لردك e=
‏قال المستقبل
♥ ♥ ممتاااااااااااز ♥ ♥
شكراليك يا اخي موضع جميل جداً

http://www.arabkm.net/
‏قال Hein
السلام عليك أخي الإضافة لم تشتغل على مدونتي هل يمكنك مساعدتي إن تكرمت وشكرا :) http://www.almanara.ml/
‏قال كن مدون
وعليكم السلام ورحمة الله وبركاته
أخي الكريم ارفق رابط لصفحة في مدونتك يكون فيها تجربة للخاصية حتى وان لم تكن تعمل
‏قال Mohamed Abouayana
ولكن كيف اقوم باضافه كود لاداه معينه لتظهر داخل الصندوق وليس رابط فيديو او صوره
‏قال كن مدون
هذا الأمر يحتاج بعض الخبرة أخي الكريم
أسهل طريقة هي ان تضيف الآداة التي تريد في صفحة HTML خارجية وترفعها ثم تضيفها كرابط Iframe في الصندوق
يعني تضيفها كما تضيف موقع
‏قال Mohamed Abouayana
انا محتاجلك كثير
اولا انا لدي مكتبه جي كيوري اصدار 1.10.2
عند اضافه colorbox بدون مكتبه جي كيوري التي في الموضوع لاتعمل
قمت بأضافه مكتبه الجي كيوري التي في الموضوع اصبحت تعمل ولكن الاضافات الاخري التي تعتمد علي الاصدار الذي كان لدي 1.10.2 لا تعمل
لماذا مكتبه الجي كيوري لدي لاتعمل الا مع اضافه واحده فقط عند إضافه اي اضافه اخري لاتعمل
وعند تكرير مكتبه الجي كيوري لاتعمل الاضافات باكملها
وهل هناك تعارض بين الاضافه colorbox ومكتبات جيكيوري بالاصدارات التي تختلف عن التي في الموضوع
للمعاينه : http://ayanatech.blogspot.com
‏قال كن مدون
أخي الكريم مكتبات جي كويري تقريبا واحده
ربما يكون التعارض في مكان المكتبة انقل رابط المكتبه تحت الوسم <head> مباشرة
وانا شخصيا في الموضوع استخدمت مكتبة جي كويري التي في قالبي وليست التي في الموضوع وتعمل جيداً
هذا هو رابطها جربها تعمل لدي مع جميع الأدوات
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>
ان لم يضبط معك فإما ان لديك مكتبة جي كويري اخرى او لديك اكواد جي كويري تخص اضافات تتعارض مع بعضها
‏قال Mohamed Abouayana
حلت المشكله =b
اتفه مشكله شفتها
كود المكتبه الي كان عندي كان فيه نقطه ناقصه قبل min في نهايه رابط المكتبه
‏قال كن مدون
هذا مشكلة مجال البرمجيات عموما نقطه واحده قد تكون الفيصل بين عمل اضافة وربما قالب كامل او تلفه تماما
خيراً الحمد لله
‏قال Unknown
شكرا على الموضوع
اريد ان اعرف رأيك فى مدونتى
https://technique-4u.blogspot.com

عدد المواضيع