8/31/2017

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



تركيب الإضافة


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

الخطوة الأولى

  • قم بتسجيل حسابك ثم إذهب إلى منصة البلوجر 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;
    }
    

    التعديل على الزر
    المحدد بهذا اللون في النمط هو لون الأيقونة.
    المحدد بهذا اللون في النمط هو لون الأيقونة عند تمرير زر الفأرة فوق الزر.



add_commentإرسال تعليق

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

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

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

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

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

      حذف