إستبدال عارض صور بلوجر بمستعرض متميز

عارض الصور Image Viewer  fancybox هو مكون إضافي يعمل على عرض الصور بشكل أنيق وإحترافي كما أنه يتميز بالكثير من المزايا أهمها أنه سريع ومتجاوب مع جميع شاشات العرض وأضف أنه مفتوح المصدر أي أنك تستطيع تخصيصه كما تريد فقط إذا كانت لديك خبرة لابأس بها في التعامل مع الأكواد..مع العلم أن هذه الميزة موجودة مسبقا بشكل إفتراضي على منصة البلوجر - Blogger إلا أنها بسيطة من حيث طريقة العرض.


طريقة التركيب

لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الأولى: لوحة التحكم

  • قم بتسجيل حسابك ثم إذهب إلى منصة البلوجر dashboard
  • إنتقل للمدونة >> ثم إلى قالب >> ثم إضغط على تحرير  Edit HTML  
  • إضغط في وسط محرر الأكواد  ثم   F + Ctrl لإضهار مربع البحث
  • بإستعمال  الزر  C +Ctrl  للنسخ و  V +Ctrl  للصق قم بوضع الأكواد في المكان المناسب
لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الثانية: تركيب الأكواد

  • قم بالبحث عن هذا الوسم </body>فوقه أي قبله قم بوضع كود js التالي..
       <!-- Image Viewer  fancybox -->
        <link href='https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css' rel='stylesheet'/>
        <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(){/\.(?:jpg|jpeg|gif|png)$/i.test($(this).parent("a").attr("href"))&&($(this).parent("a").attr("data-src",$(this).parent("a").attr("href")),$(this).parent("a").attr("data-fancybox","postLightBox"))});var t={infobar:!0,buttons:!0,speed:300,margin:[40,20]};$("[data-fancybox]").fancybox(t)});
    //]]>
    </script> 
    
    check
    يمكنك مراجعة جميع إصدارات مستعرض fancybox من خلال هذا الرابط -إضغط هنا- والحصول في نفس الوقت على الروابط المباشرة.
    ملاحظة مهمة
    ستلاحظ عند الضغط على صورة من صور المواضيع الخاصة بك تُعرض على المستعرض الجديد إلا أن المستعرض الإفتراضي الخاص بمنصة البلوجر يعملان معاً في عرض الصور ماعليك سوى التوجه إلى قسم إعدادات >> ثم إلى المشاركات والتعليقات >> ثم في الوسط تجد عرض الصور في العرض المبسط إضغط على القائمة وحدد الخيار (لا)
لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الأخيرة: خاصية data-fancybox

تعليق:
- هذه الخاصية التي يتيحها لنا مستعرض الصور هي ببساطة عند الضغط على زر أو أيقونة يقوم مستعرض الصور بفتح الصورة مثلا لنجعل الزر مسؤول عن (عرض الصورة بالحجم الكامل) لمشاهدة مثال حي أظهر الصورة بالحجم الكامل

- ربما أنت تتسائل الآن اين أضع هذا الزر ؟!..الجواب بسيط يمكنك إستخدامه داخل منشوراتك بنفس الطريقة التي عرضناها لك في المعاينة أو يمكنك جعله كميزة في منشورات الصفحة الرئيسية بجانب أزرار مشاركة الموضوع أو داخل حقل شرائح الصور المهم عند الضغط عليه تفتح معك الصورة بالحجم الكامل و الطريقة سهلة فقط إتبع الآتي..مع العلم أن هذه الخطوات التي سنقوم بها إختيارية.
  • قم بالبحث عن هذا الوسم <data:post.body/> قم بإختيار المكان مثلا بجانب أزرار المشاركة أو بجانب - إقرأ المزيد - أو داخل حقل شرائح الصور ثم أضف هذا الكود
    ملاحظة مهمة
    ستجد الوسم <data:post.body/> الذي نبحث عنه مكرر أكثر من مرة المطلوب هو غالبا الثاني تجده داخل حقل البوست <b:includable id='post' var='post'> أو قم بالتجربة على الجميع حتى يظهر الزر المطلوب بالعلم ان وضع الكود فوق الوسم يعني ظهور الزر فوق صفحة التدوينة ووضعه أسفل الوسم يعني العكس.
    
     <a class='zoom-img-post' data-fancybox='postLightBox' expr:href='data:post.firstImageUrl' title='أظهر الصورة بالحجم الكامل'> <i class='fa fa-picture-o'/></a> 
    

    التعديل على الزر
    الكود المحدد بهذا اللون هو كود شكل أيقونة Font-Awesome تستطيع تغييرها - من هناويجب أن يحتوي قالب مدونتك على رابط للمكتبة حتى تظهر الايقونات بدون مشاكل.
    - هذا رابط المكتبة قم بنسخه
    <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

    وضعه فوق الوسم </head> أما إذا كان موجود فلاداعي لإضافته بالعلم أن (تحديث 4.7.0) هو آخر تحديث حاليا لمكتبة font-awesome
  • قم بالبحث عن هذا الوسم ]]></b:skin> فوقه أي قبله قم بوضع كود css التالي..
    
    a.zoom-img-post  {
        color:  #dedede;
        font-size:  2em;
        float:  right;
        margin:  8px;
        padding:  0;
        display: -webkit-inline-flex;
        display: -ms-inline-flex;
        display: inline-flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -moz-box-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-align-items: center;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -ms-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
    }
    
    a.zoom-img-post:hover  {
        color:  #c9511d;
    }
    
    التعديل على الزر
    النمط المحدد بهذا اللون هو لون الأيقونة.
    النمط المحدد بهذا اللون هو لون الأيقونة عند التحويم.


تعليقات

  1. اضافة رائعة جدا سلمت يداك

    جربت الاضافة و لكنها لا تعمل
    تعمل فقط من خلال تفعيل data-fancybox و بواسطة الزر اللذي ظهر
    انما عند الضغط على الصورة لا تعمل

    ردحذف
    الردود
    1. بما انها تعمل مع الزر هذا يعني انه لايوجد اي مشكلة في المكون الاضافي
      لكن هناك احتمالات من بينها ان هناك صور في موضوعك لاتحتوي على رابط النقر <a herf="..."/> / جرب ان تضع صورة جديدة في التدوينة ولاحظ الفرق

      حذف
    2. فعلا كلامك صحيح اشتغلت الاضافة بشكل صحيح

      اشكرك جزيل الشكر

      حذف

إرسال تعليق

قد يهمك ايضا

  • إنشاء صفحة الإتصال على بلوجر متعددة الإستخدامات | نموذج طلب الإنضمام للمدونة

  • سكريبت إضافة صفحة إعادة توجيه الروابط لمدونتك | Custom Redirects In Blogger

  • مجانا - سكريبت إضافة أداة عربة التسوق إلى المدونة بإستخدام مكتبة simpleCart (js)

  • إضافة خاصية تقييم المحتوى على شكل نجوم 🌟 بإستخدام تطبيق Firebase

  • قالب فلامينغو - Flamingo - قالب مجلة عصري بـ 10$ - الإصدار v2.0.0

  • سكريبت إضافة صندوق لعرض الإشعارات مع شارة الترقيم | notification badge