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

عارض الصور 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;
  }
  

  التعديل على الزر

  النمط المحدد بهذا اللون هو لون الأيقونة.

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