مساحة إعلانية

الاثنين، 13 أكتوبر، 2014

الاثنين، 13 أكتوبر، 2014

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

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

هناك 16 تعليقًا:

  1. شكرا لك اخي عمرو موضوع اكثر من رائع و شرح مفهوم و منسق =r

    ردحذف
    الردود
    1. أخي الغالي منير اصبح مرورك جزء من الموضوع يا طيب فلا تحرمنا منه أبداً
      شكراً لك =r

      حذف
  2. سلام عليكم
    لو سمحت
    انا بعمل موقع للكلية بتاعتنا صيدلة
    ومعايا موقع فيه محرك بحث قاموس للكلمات الصيدلية
    انا كنت عايز احط محرك القاموس ده في مدونتي في صندوق زي محرك بحث جوجل
    http://www.tbeeb.net/med/
    بالله عليك تساعدني وهيكون ليك الثواب علما بان المدونة ليست للأرباح المدونة وانما للمنفعه العامة

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

      حذف
    2. شكرا ليك انا الحمد لله عرفت اضيف القاموس للمدونة وشكرا لردك e=

      حذف
  3. ♥ ♥ ممتاااااااااااز ♥ ♥
    شكراليك يا اخي موضع جميل جداً

    http://www.arabkm.net/

    ردحذف
  4. السلام عليك أخي الإضافة لم تشتغل على مدونتي هل يمكنك مساعدتي إن تكرمت وشكرا :) http://www.almanara.ml/

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

      حذف
  5. ولكن كيف اقوم باضافه كود لاداه معينه لتظهر داخل الصندوق وليس رابط فيديو او صوره

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

      حذف
  6. انا محتاجلك كثير
    اولا انا لدي مكتبه جي كيوري اصدار 1.10.2
    عند اضافه colorbox بدون مكتبه جي كيوري التي في الموضوع لاتعمل
    قمت بأضافه مكتبه الجي كيوري التي في الموضوع اصبحت تعمل ولكن الاضافات الاخري التي تعتمد علي الاصدار الذي كان لدي 1.10.2 لا تعمل
    لماذا مكتبه الجي كيوري لدي لاتعمل الا مع اضافه واحده فقط عند إضافه اي اضافه اخري لاتعمل
    وعند تكرير مكتبه الجي كيوري لاتعمل الاضافات باكملها
    وهل هناك تعارض بين الاضافه colorbox ومكتبات جيكيوري بالاصدارات التي تختلف عن التي في الموضوع
    للمعاينه : http://ayanatech.blogspot.com

    ردحذف
    الردود
    1. أخي الكريم مكتبات جي كويري تقريبا واحده
      ربما يكون التعارض في مكان المكتبة انقل رابط المكتبه تحت الوسم <head> مباشرة
      وانا شخصيا في الموضوع استخدمت مكتبة جي كويري التي في قالبي وليست التي في الموضوع وتعمل جيداً
      هذا هو رابطها جربها تعمل لدي مع جميع الأدوات
      <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>
      ان لم يضبط معك فإما ان لديك مكتبة جي كويري اخرى او لديك اكواد جي كويري تخص اضافات تتعارض مع بعضها

      حذف
    2. حلت المشكله =b
      اتفه مشكله شفتها
      كود المكتبه الي كان عندي كان فيه نقطه ناقصه قبل min في نهايه رابط المكتبه

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

      حذف
  7. شكرا على الموضوع
    اريد ان اعرف رأيك فى مدونتى
    https://technique-4u.blogspot.com

    ردحذف

نسعد ونتشرف بتعليقاتكم
لكن هناك شروط يجب اتباعها لضمان نشر التعليقات
1ان يكون التعليق يخص محتوى الموضوع
2ان لا يحتوي التعليق اى روابط دون داعي
3إن أردت إضافة كود حوله اولا بمحول الأكواد
4أن لا يحتوي التعليق اي الفاظ او اساءات لاى احد
5أى سؤال بعيد عن محتوى الموضوع يرجى استخدام ركن الأسئلة

جميع الحقوق محفوظة لــ كن مدون 2013-2015 ©