اجعل فيديوهات اليوتيوب والصور في نافذة منبثقة دخل مدونة بلوجر
بسم الله الرحمن الرحيم والصلاة والسلام على أشرف المرسلين سيدنا محمد وعلى آله وصحبه ومن تبعه بإحسان إلى يوم الدين، أما بعد ، احبتي متابعي مدونة هشام هاشم للمعلوميات والتقنيات ، اليوم في قسم دروس بلوجر سوف نقدم لكم خدمة في منتهى الروعة لكل المدونين والنشارين على مدونة بلوجر ، وهذه الاضافة التي سوف نقدم لكم جد سهلة ومتجاوبة مع جميع القوالب بدون استثناء ، كما انها سوف تساعد الزور في التركيز على الصورة او مشاهدة الفيديو بدرجة كبيرة عن السابق .
العديد من المدونين تنشر صور وفيديوهات دبرجة كبيرة جدا ولكن احيانا تاخذ لهم مساحة في داخل المواضيع ، وايضا الزوار احيانا ترغب في مشاهدة الصور الخاصة بالموضوع دفعة واحده دون الاطلاع على صورة بصورة وهذا يسبب التاخير لدى الزوار ، وطبعا هذه الاضافة ليست بالامر المهيـــــــــــم في المدونة ولكن ربما تكون اضافة جميلة جدا لأخذ الراحة في مشاهدة الفيديوهات على صندوق خارجي او مراقبة الصور دفعة واحدة واضحة .
هذه الاضافة سوف يتم اضافتها في اثنين اماكن لا غير بنسبة للفيديوهات اما بنسبة لصور سوف تحتاج الى عملية واحده و إنتها ،العملية الاولى وهي كود خاص بصندوق المسمى Colorbox والذي سوف يكون سببا في ظهور الصور في صندوق منبثق بحجم مناسب للهواتف الذكية واجهزة الكمبيوتر ، وهذه الاضافة لا تحتاج الا لاضافة الصورة بدون اي اضافة ، اما بنسبة للفيديوهات يحتاج الى كود ثاني داخل المشاركات الذي سوف يظهر الفيديو على صندوق ليركز المشاهد على الفيديو بطريقة جيدة ومريحة.
كيفية فتح الصور والفيديوهات على صندوق خارجي متجاوب مع جميع الاجهزة لمدونة بلوجر :
تحتج الى هذه الاضافات التي سوف نشرح لكم في كيفية تركيبها على المدونة :
اولا : يجب عليك الدخول الى القالب >> ثم تحرير html >> بعدها نبحث عن هذا الامر </head> ونضع فوقه الكود مباشرة .
<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(){
$("a[rel='images']").colorbox({transition:"fade"});
$("a[rel='imagessamesize']").colorbox({transition:"none", width:"75%", height:"75%"});
$("a[rel='slideshow']").colorbox({slideshow:true});
$(".youtube").colorbox({iframe:true, innerWidth:760, innerHeight:520});
$(".vimeo").colorbox({iframe:true, innerWidth:760, innerHeight:520});
$(".iframe").colorbox({width:"80%", height:"80%", iframe:true});
$('a[href$=jpg]').colorbox();
$('a[href$=jpeg]').colorbox();
$('a[href$=png]').colorbox();
$('a[href$=gif]').colorbox();
$('a[href$=bmp]').colorbox();
$('a[href$=JPG]').colorbox();
$('a[href$=JPEG]').colorbox();
$('a[href$=pdf]').colorbox({iframe:true, innerWidth:760, innerHeight:520});
$('a[href$=swf]') .colorbox({iframe:true, innerWidth:660, innerHeight:420});
});
</script>
ملاحظة الاولى : اذا كنت تتوفر على مكتبة jQuery فى القالب قم بحذف كود ajax بللون الاحمر .
ملاحظة الثانية : قم بتوقيف خاصية Lightbox لتجنب فتح الصور مرتين .
بعدها تضيف اي صورة في المشاركة واي شخص يقوم بالنقر عليها سوف تظهر على صندوق منبثق .
ثانيا : الان سوف اجعل الفيديوهات تظهر في صندوق خارجي منبثق سوف يكون لك اثنين اختياريا احترافية .
1- هذه العملية اذا تريد ان يظهر رابط النقر لظهور الفيديو بعد الضغط عليه في صندوق خارجي
<a class="youtube" href="رابط مباشر للفيديو على اليوتيوب" title="كيفية إنشاء رسوم المعلوميات">اضغط هنا لمشاهدة الفديو</a>
2 - هذا الكود سوف يظهر الفيديو بشكل صورة بالمقاس الذي تريد ثم بعد الضغط عليه سوف يظهر الفيديو في صندوق خارجي .
<a class="youtube" href="https://www.youtube.com/embed/rtIvfDl4azQ">
<img src="http://store1.up-00.com/2016-11/1478438883881.jpg "></a>
ملاحظة راقب الصورة في كيفية اخذ رابط الفيديو الذي سوف تستعمل .
