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

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://1.bp.blogspot.com/-h_mXwHvfgUo/VGZFVgbGphI/AAAAAAAAHds/v3aa-ZZ-eI4/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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      حذف

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


لتصلك إشعارات ردود هذا الموضوع على البريد الإلكترونى أضف علامة بالمربع بجوار كلمة "إعلامى"

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

تصميم كن مدون