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

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

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

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

     قد تبدو مدونتك مختلفة عند إضافة أداة Colorbox إليها ، هذه الأداة الرائعة التى تعطى تأثير جمالى إلى الموقع و هى تشبه صندوق الضوء Lightbox الموجود ضمن أدوات بلوجر لعرض الصور ، ولكن colorbox تتميز فى أنها ليست تعرض الصور فقط بل يمكن عرض مقاطع الفيديو أيضًا ، كذلك يمكن فتح الروابط التى تؤدى إلى المواقع الخارجية داخل إطار مدمج فى أداة 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 الموجودة فى قوالب بلوجر لتجنب فتح الصور مرتين :

 وذلك بالذهاب إلى لوحة تحكم بلوجر ثم تبويب الإعدادات ثم تبويب مشاركات وتعليقات

ثم قم بإختيار "لا" بجوار "عرض الصور فى العرض المبسط"

والآن نتجه إلى تفعيل الإضافة على الصور والفيديو والروابط الخارجية

أولا: تفعيل إضافة 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  لرابط الفيديو  

مثال لكود صورة مصغرة تحمل رابط فيديو

إضغط على الصورة لمشاهدة الفيديو

الكود المستخدم:

<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.

أتمنى أن يكون الشرح واضح وأى إستفسار أرجو كتابته بتعليق .

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

بقلم Dr.Rasha Omran

مطورة تطبيقات الهاتف ، سفيرة ببرنامج Women Techmakers التابع لجوجل ، أهتم بالمحتوى الرقمى وأحببت أن أدون كل ما تعلمته فى هذا الموقع للإفادة فى أعمال هادفة