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

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

 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;
      }
   
    }
  }
});

دائما مبدع في اكوادك .. جميل جدا