اسهل طريقة لتفعيل fancybox للصور في مدونات بلوجر

سنشرح لكم في هذه التدوينة طريقة لتفعيل fancybox. طبعا قد تكون ربما تعلم ماهو fancybox اولا تعلمه، وحتى نشرح ماهو فانسي بوكس للذين لا يعلمون ماهي هذه الخاصية. ببساطة هي تعتبر من اشهر اضافات مكتبة الجي كويري، وهو تحديث الجديد لخاصية LightBox والذي يقوم بعرض الصور و الفيديوهات وفلاشات الموجودة داخل مدونتك بشكل انيق وجميل يمكنك معاينة الاضافة من الاسفل.

طريقة تركيب وتفعيل fancybox:

* اولا وقبل ان نبدأ يكنك معاينة الصور بعد اضافة تأثير fancybox lk [ من هنا ]
* الان قم بدخول الى مدونتك ثم المظهر بعدها الى تحرير 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>

عند انتهاء قم بحفظ القالب واتجه الى اي صورة موجودة في مدونتك وقم بضغط عليها ستجد ان شكلها قد تغيير.
ملاحظة: في حال لم تشتغل معك هذه اضافة اذا لابد ان مدونتك لا تحتوي على مكتبى الجي كويري، طبعا يمكنك مشاهدة الدرس الذي نشرح فيه كيفية اضافة مكتبة الجي كويري لمدونات بلوجر.

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

3 تعليقات

اضف تعليق