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

سنشرح لكم في هذه التدوينة طريقة لتفعيل 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>

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

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

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