دليل المدون

2016-06-20

فتح الصور والفيديو والروابط الخارجية داخل صندوق الضوء Colorbox

بسم الله الرحمن الرحيم

والصلاة والسلام على أشرف المرسلين

سيدنا محمد وعلى آله وصحبه أجمعين

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

كيفية تثبيت إضافة Colorbox على مدونات بلوجر

1. إذهب إلى لوحة تحكم بلوجر ثم تبويب قالب ( قم بالإحتفاظ بنسخة إحتياطية من القالب).
2. إبحث عن الكود التالى بإستخدام لوحة المفاتيح Ctrl+F
</head>
3. ثم أنسخ الكود التالى وقم بإضافته فوق الكود السابق مباشرة

<link href='https://cdn.rawgit.com/DrRO/colorbox/master/example1/colorbox.css' rel='stylesheet'/>
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>
  <script src='https://cdn.rawgit.com/DrRO/colorbox/master/jquery.colorbox.js'/>
<script type="text/javascript">
 // Make ColorBox responsive
 jQuery.colorbox.settings.maxWidth  = '95%';
 jQuery.colorbox.settings.maxHeight = '95%';

 // ColorBox resize function
 var resizeTimer;
 function resizeColorBox()
 {
  if (resizeTimer) clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {
    if (jQuery('#cboxOverlay').is(':visible')) {
      jQuery.colorbox.load(true);
    }
  }, 300);
 }

 // Resize ColorBox when resizing window or changing mobile device orientation
 jQuery(window).resize(resizeColorBox);
 window.addEventListener("orientationchange", resizeColorBox, false);
</script>
<script>
$(document).ready(function(){
$(&quot;a[rel=&#39;images&#39;]&quot;).colorbox({transition:&quot;fade&quot;}); 
$(&quot;a[rel=&#39;imagessamesize&#39;]&quot;).colorbox({transition:&quot;none&quot;, width:&quot;75%&quot;, height:&quot;75%&quot;});
$(&quot;a[rel=&#39;slideshow&#39;]&quot;).colorbox({slideshow:true}); 
$(&quot;.youtube&quot;).colorbox({iframe:true, innerWidth:760, innerHeight:520}); 
$(&quot;.vimeo&quot;).colorbox({iframe:true, innerWidth:760, innerHeight:520});
$(&quot;.iframe&quot;).colorbox({width:&quot;80%&quot;, height:&quot;80%&quot;, iframe:true}); 
$(&#39;a[href$=jpg]&#39;).colorbox();
$(&#39;a[href$=jpeg]&#39;).colorbox();
$(&#39;a[href$=png]&#39;).colorbox();
$(&#39;a[href$=gif]&#39;).colorbox();
$(&#39;a[href$=bmp]&#39;).colorbox();
$(&#39;a[href$=JPG]&#39;).colorbox();
$(&#39;a[href$=JPEG]&#39;).colorbox();
$(&#39;a[href$=pdf]&#39;).colorbox({iframe:true, innerWidth:760, innerHeight:520});
$(&#39;a[href$=swf]&#39;) .colorbox({iframe:true, innerWidth:660, innerHeight:420});
});
</script>

4. ثم إحفظ القالب.

ملاحظات هامة:

  • يفضل إزالة السطر الملون بالأزرق إذا كان لديك مكتبة jQuery فى القالب. 
  • يجب التأكد من تعطيل خاصية Lightbox الموجودة فى قوالب بلوجر لتجنب فتح الصور مرتين :
 وذلك بالذهاب إلى لوحة تحكم بلوجر ثم تبويب الإعدادات ثم تبويب مشاركات وتعليقات
ثم قم بإختيار "لا" بجوار "عرض الصور فى العرض المبسط"
blogger lightbox
والآن نتجه إلى تفعيل الإضافة على الصور والفيديو والروابط الخارجية

أولا: تفعيل إضافة Colorbox على الصور

  • تعمل إضافة Colorbox تلقائيًا دون تدخل منك بالنسبة للصور (كل صورة بالموضوع تفتح مستقلة عن الأخرى)
  •  ولكن إذا أردت أن تعرض الصور على هيئة عرض شرائح Slideshow إتبع الآتى:
  1. قم برفع الصور التى تريد إدراجها إلى المشاركة
  2. ثم إذهب إلى تبويب HTML  للمشاركة وإبحث عن كود الصور
  3. إضف الوسوم rel="slideshow"  بين a  و herf  لكل الصورة 
ليكون كالمثال التالى:

<a rel="slideshow" href="رابط الصورة الأولى  " imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="رابط الصورة الأولى مصغرة" width="290" /></a></div>

<a rel="slideshow" href="رابط الصورة الثانية" imageanchor="1"  style="margin-left: 1em; margin-right: 1em;"><img border="0" src="رابط الصورة الثانية مصغرة" /></a></div>
.
.
وهكذا

ثانيًا: تفعيل إضافة Colorbox على الفيديو

يمكن من خلال أداة Colorbox فتح الفيديو داخل صندوق الضوء وذلك من خلال الضغط على رابط نصى أو صورة مصغرة ولتفعيل ذلك على بلوجر إتبع الآتى:
  1. داخل مشاركة بلوجر قم بإضافة نص يؤدى إلى الفيديو مثلا : "إضغط هنا لمشاهدة الفيديو" ثم قم بإضافة رابط تضمين للفيديو على اليوتيوب على هذا النص
  2. إذهب إلى تبويب HTML للمشاركة وإبحث عن الكود الذى به رابط الفيديو.
  3. أضف الوسوم class="youtube" بين a  و herf  لرابط الفيديو إذا كان من اليوتيوب ليكون كالمثال التالى:
<a class="youtube" href="رابط تضمين مباشر للفيديو على اليوتيوب" title="كيفية إنشاء تطبيق القرآن الكريم">اضغط هنا لمشاهدة الفديو</a>

ملاحظات هامة:

  • إذا كان الفيديو من موقع فيمو >> قم بإضافة الوسوم class="vimeo" بين a  و herf لرابط تضمين الفيديو المباشر.
  • يمكن أيضًا إستبدال النص الذى يحمل رابط الفيديو بصورة مصغرة بالضغط عليها يتم فتح الفيديو داخل صندوق الضوء ، ولتنفيذ ذلك يمكن رفع الصورة المصغرة للمشاركة وإضافة رابط تضمين الفيديو إليها ثم إضافة الوسوم class="youtube" بين a  و herf  لرابط الفيديو  
مثال لكود صورة مصغرة تحمل رابط فيديو

https://www.youtube.com/embed/i2Yh_oBJ8Ds
إضغط على الصورة لمشاهدة الفيديو
الكود المستخدم:
<a  class="youtube"  href="https://www.youtube.com/embed/i2Yh_oBJ8Ds">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7O81CSOSrIYaOlo40mSJBjH3kZCRTIS9vvOJDQkB38SumNfnuBQN9pr6OptB-eQUBBqEBdMc9o44An7U9o3wYlrO4l2EebQtzrskiea2ajDKWDXRLEtVXXZvS_XAiZwzRL8KW6r5mQmSB/s1600/quraan-icon.png"></a>

ثالثُا: تفعيل إضافة Colorbox على الإطارات التى تحتوى على الروابط الخارجية iframe

يعتبر Colorbox من الحيل التى تستخدم للحفاظ على إحصائيات الموقع فى حالة وجود روابط خارجية ، فبدلا من أن يترك الزائر الموقع بسرعة ليتبع رابط تحميل أو معاينة أى موقع يمكن أن يقوم بهذه المهمة من خلال فتح الرابط بإطار iframe داخل صندوق الضوء ، وبالتالى يقضى الزائر فى الصفحة فترة أطول...، ولتفعيل هذه الميزة إتبع الآتى:
  1. قم بإضافة النص مرتبط به الرابط الخارجى داخل المشاركة.
  2. توجه إلى تبويب HTML للمشاركة و إبحث عن سطر الكود الخاص بالرابط الخارجى.
  3. أضف الوسوم class="iframe" بين a  و herf  للرابط الخارجى ليكون الكود كالتالى:
<a class="iframe" href=" الرابط الخارجى" rel="nofollow" target="_blank">إضغط هنا للمعاينة </a></div>

مميزات أخرى للـ Colorbox

يمكن توظيف هذه الأداة الرائعة فى العديد من المهام فيمكن إستخدامها فى فتح الكتب الإلكترونية PDF داخل صندوق الضوء ، كذلك يمكن إستخدامها مع ملفات الفلاش (وتجنب صعوبة تحميل الصفحة التى تحتوى على الفلاش).
يمكن أيضًا إستخدام Colorbox مع نموذج الإتصال أو لعرض أدوات المشاركة على المواقع الإجتماعية .........إلخ.

إذا كنت تريد تخصيص أكثر للأداة و تغيير تأثيرات عرض صندوق الضوء ، يمكنك تحميل الإضافة من موقعها الرسمى Colorbox والتعديل عليها ورفعها على إستضافتك الخاصة أو الإستضافة على Github أو Dropbox.

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

هناك 22 تعليقًا

  1. اضافة رائعة شكرا لك انا اضفتها لكن هي لم تعمل معي وايضا اريد جعل فديوهات المدونة تكون متجاوبة ووجدت موضوع عب مدونتكم الرائعة وايضا لم تعمل معي هل يوجد حل وشكرا هذه http://goo.gl/qHc1J9

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

      حذف
  2. السلام عليكم يامبدع ممكن خدمه اختي اريد اضيف ازرار متابعة نفس مدونتك بس تكون في موضوع معين

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      لإضافة أزرار المتابعة تابع الشرح بهذا الموضوع
      أزرار المشاركة رأسية عائمة

      حذف
  3. اختي معي مشكله اعلانات ادسنس لا تظهر في الموضوع لدي نفس قالب مدونتك تم أضافة اعلانات اسفل واعلى الموضوع ولم تظهر

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

      حذف
    2. نفس مشكله اختي ممكن تسوي شرح لقالب مدونتك

      حذف
    3. ربما يكون عدم ظهور إعلان أدسنس عدم تفعيل حسابك بالهوية الشخصية أو حظر الموقع وليس المشكلة بالقالب

      حذف
  4. السلام عليكم

    كما اعتدنا عليكي يا دكتوره قمه في الروعة ويارب دائما في تفوق

    أخوكي من مدونة الكابتن

    ردحذف
    الردود
    1. شكرًا جزيلًا على متابعتكم ودعمكم الدائم

      حذف
  5. جربت اختي خطوه بخطوه ولاكن لاتوجد نتيجة :(

    ردحذف
    الردود
    1. قد يكون هناك إضافة أخرى بالقالب لديك تعمل بتقنية jquery تتعارض مع Colorbox

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

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

      حذف
  7. شكراً كثيراً على الاضافه المميزه .
    لدي استفسار بخصوص الاضافة هل هي مخالفه لدى ادسنس
    وهل يمكن وضع زر الرابط ليتحول الى عد تنازلي داخل هذه الاضافه وهل يمكن وضع اعلاد ادسنس بجانب في الاضافة..

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

      حذف
  8. لقد طبقت الطريق واشتغلت ولكن دث اخطاء ف القالب
    ولكن انا عندى عارض الصور الاساسى ولكن يوجد مشكله به
    يمكنك المعاينه المدونه من هنا http://www.tqnyplus.com
    ,ومعرفه عدم عمل الاضافه الاساسيه

    ردحذف
  9. مرحبا كيف ممكن ارض ملفات ال pdf في ال colorbox من جوجل درايف

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

      حذف
  10. عندى مشكله بقالب مدونتى عند اضافه مكتبه جيكورى بتحصل خلبطه فى القالب وبتبوظ الاضافات وايضا عارض الصور الى فى القالب مش شغال فى مشكله
    ف انا عايز اضيف مكتبه الجيكورى بدون متتعارض مع الاضافت

    ردحذف
    الردود
    1. عند حدوث تعارض بين الإضافات ، يمكنك الإستغناء عن إحداها لتعمل الأخرى بشكل سليم

      حذف
    2. انا عندى ف القالب مش لاقى مكتبه الجيكورى دورت فى الاكواد كلها مش لاقيه خالص ف القالب بس لما بضيف كود مكتبه بتتخلبط الاضافات فعايز اعرف ازاى اصلح المشكله دى وشكرا

      حذف

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

Privacy-Policy | إعلن لدينا
جميع الحقوق محفوظة لــ كن داعيا للخير 2011-2022 ©

تصميم كن مدون