سنشرح لكم في هذه التدوينة طريقة لتفعيل fancybox. طبعا قد تكون ربما تعلم ماهو fancybox اولا تعلمه ، وحتى نشرح ماهو فانسي بوكس للذين لا يعلمون ماهي هذه الخاصية. ببساطة هي تعتبر من اشهر اضافات مكتبة الجي كويري ، وهو تحديث الجديد لخاصية LightBox والذي يقوم بعرض الصور و الفيديوهات وفلاشات الموجودة داخل مدونتك بشكل انيق وجميل يمكنك معاينة اضافة من الاسفل.
طريقة تركيب وتفعيل fancybox:
* اولا وقبل ان نبدأ يمكنك معاينة بعض الصور بعد اضافة تأثير fancybox لها.
* الان قم بدخول الى مدونتك ثم المظهر بعدها الى تحرير 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>
عند انتهاء قم بحفظ القالب واتجه الى اي صورة موجودة في مدونتك وقم بضغط عليها ستجد ان شكلها قد تغيير.
ملاحظة: في حال لم تشتغل معك هذه اضافة اذا لابد ان مدونتك لا تحتوي على مكتبى الجي كويري ، طبعا يمكنك مشاهدة الدرس الذي نشرح فيه كيفية اضافة مكتبة الجي كويري لمدونات بلوجر.
كان هذا شرح بسيط لكيفية تغيير عرض الصور في مدونات بلوجر بواسطة الفانسي بوكس ، اتمنى ان تكون هذه التدوينة نالت اعجابكم ، اذا واجهتك اي مشكلة اتركها في تعليق ، وسيسعدنا دائما تقديمها لك. وفي كل ما اتمناه لك دوام الصحة والعافية.