شرح تركيب تأثيرات fancybox على الصور بمدونات بلوجر
ماهو fancybox ، كيف أقوم بتركيب fancybox على مدونة بلوجر، كيف اقوم بعرض الصور داخل المقالات ببلوجر بشكل جميل ، كيف يعمل عرض الصور فى بلوجر.
كل هذه الاسئله تتبادر الى ذهن صاحب أى موقع أو مدونه عندما يرى عرض الصور بمدونه يصادف دخولها أثناء البحث عن كلمه معينه او صوره عبر محركات البحث بطريقه جذابه وجميله ويتسائل كيف يتم ذلك؟
الحقيقه أن هذا يتم عبر اضافه رائعه تسمى fancybox ويتم عرض الصور عبر هذه الخاصية، ببساطة هي تعتبر من اشهر اضافات مكتبة الجي كويري، وهو تحديث جديد لخاصية LightBox، وهو يقوم بعرض الصور و الفيديوهات والفلاشات الموجودة داخل مدونتك بشكل انيق وجميل.
طريقة تركيب فانسي بوكس لمدونات بلوجر:
- الان قم بدخول الى مدونتك ثم المظهر بعدها الى تحرير html.- الان قم بالبحث عن الوسم التالي.
</body>
<!-- FancyBox CSS -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css' rel='stylesheet' type='text/css'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$(".post-body a img").each(function(){
var isImage = /.(?:jpg|jpeg|gif|png)$/i.test( $(this).parent("a").attr("href") );
if ( isImage ) {
$(this).parent("a").attr('data-src', $(this).parent("a").attr("href"));
$(this).parent("a").attr('data-fancybox', 'postLightBox' );
}
else {
// .. do nothing
}
});
var options = {
infobar : true,
buttons : true,
speed : 300,
margin : [40, 20]
};
$("[data-fancybox]").fancybox( options );
});
//]]>
</script>
عند الانتهاء قم بحفظ القالب واتجه الى اي صورة موجودة في مدونتك وقم بضغط عليها ستجد ان شكلها قد تغير.
كان هذا شرح بسيط لكيفية تغيير عرض الصور في مدونات بلوجر بواسطة الفانسي بوكس، اتمنى ان تكون هذه التدوينة نالت اعجابكم، اذا واجهتك اي مشكلة اتركها في التعليق وسنعمل على حلها بعون الله .
اترك لنا رأيك او تعليقك او فكره مميزه