شاطر
اذهب الى الأسفل
avatar
مؤسسي المركز
مؤسسي المركز
القوس
عدد المساهمات : 330
متصفح الويب : Chrome
منتدى نسخة : PhpBB3
النقاط : 518
السٌّمعَة : 49
تاريخ التسجيل : 03/06/2015
العمر : 24
معاينة صفحة البيانات الشخصي للعضوhttp://www.t-mrkz.com/

default عرض الصور على النسخة المحمولة بنفس الصفحة

في الجمعة سبتمبر 04, 2015 4:51 pm
تقييم المساهمة: 100% (1)
مرحبا بكم اصدقائي

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

الخطوات كالاتي :

 1- أضافة كود CSS

هناك بعض الصور الواسعة جداً مما تؤدي الى تشويه الصفحة والتأثير عليها والتي تتجاوز على حقول الموضوع وتشوية الصفحه
لمنع هذا، فمن الضروري إضافة هذه الأكواد إلى ورقة الأنماط CSS الخاص بك. للقيام بذلك، انتقل إلى لوحة> مظهر المنتدى> اللون> ورقة الأنماط CSS الإدارة وإضافة الأكواد التالية التالية:


الكود:
.mobile_image { max-width:99% }
#mpage-body .postbody > .content > div { overflow:hidden }
هذا سوف يقلل من حجم الصور بحيث تتناسب مع حجم الموضوع، وسوف تمنع اي تجاوز.  


2- تركيب كود الجافا سكربت

لمشاهدة الصور بداخل الموضوع فمن الضروري تركيب الجافاسكربت التالي حيث يقوم بهذه العملية بكامل شكلها ،  عليك التوجه إلى لوحة الإدارة> العناصر الأضافية> الجافا سكربت إدارة رمز وإنشاء جافاسكربت  جديد:

العنوان : صور نسخة الجوال
أضف الكود الى : في جميع الصفحات

الكود:
$(function() {
  var mode = 0;
  /* -- Options -- */
  // 0 : Montre toutes les images par défaut
  // 1 : Montre les images uniquement au clic
 
  if (!_userdata.page_desktop) return;
 
  var a = document.getElementsByTagName('A'), i = 0, j = a.length,
      showImage = function() {
        if (/img_link/.test(this.className)) {
          this.onclick = null;
          this.removeAttribute('class');
          this.innerHTML = '<img class="mobile_image" src="' + this.href + '" alt="' + this.innerHTML + '" />';
          return false;
        }
      };
 
  for (; i < j; i++) {
    if (/img_link/.test(a[i].className)) {
   
      switch (mode) {
        case 0 :
          a[i].removeAttribute('class');
          a[i].innerHTML = '<img class="mobile_image" src="' + a[i].href + '" alt="' + a[i].innerHTML + '" />';
          break;
       
        case 1 :
          a[i].onclick = showImage;
          break;
       
        default :
          a[i].onclick = showImage;
          break;
      }
   
    }
  }
});


أنتهى الدرس حتى الان 
تقديم الدرس كان من قبل Ange Tuteur تم تعريب من قبل new.moon 

تحياتي لكم 
t-mrkz.com
avatar
عضو جديد
الجوزاء
عدد المساهمات : 38
النقاط : 52
السٌّمعَة : 2
تاريخ التسجيل : 30/08/2015
العمر : 24
معاينة صفحة البيانات الشخصي للعضو

default رد: عرض الصور على النسخة المحمولة بنفس الصفحة

في السبت سبتمبر 05, 2015 12:08 am
مشاء الله يعطيك العافية علي هيك كود بحل كل مشاكل الجوال
دوم التألق والبداع بنتظار جديدكم القادم cheers
عضو جديد
عدد المساهمات : 57
النقاط : 61
السٌّمعَة : 2
تاريخ التسجيل : 16/05/2015
معاينة صفحة البيانات الشخصي للعضو

default رد: عرض الصور على النسخة المحمولة بنفس الصفحة

في السبت سبتمبر 05, 2015 1:38 pm
دائما مبدع في اكوادك .. جميل جدا
الرجوع الى أعلى الصفحة
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى