أخر الاخبار

شرح تركيب تأثيرات fancybox على الصور بمدونات بلوجر

شرح تركيب تأثيرات 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>


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


الأن بإذن الله ستلاحظ عند الضغط على صورة من صور المواضيع الخاصة بك تُعرض على المستعرض الجديد إلا أن المستعرض الإفتراضي الخاص بمنصة البلوجر يعمل ايضا في عرض الصور . 
ولتحديد المساعرض الجديد فقط فى عرض الصور، ماعليك سوى التوجه إلى قسم إعدادات >> ثم إلى المشاركات والتعليقات >> ثم في الوسط تجد عرض الصور في العرض المبسط إضغط على القائمة وحدد الخيار (لا) وإليك صورة توضيحية


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



    حجم الخط
    +
    16
    -
    تباعد السطور
    +
    2
    -