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

الجوال اظهار الصور مباشر بدون الضغط على زر اظهار / اخفاء للجوال

في الأحد نوفمبر 01, 2015 7:23 am
عرض الصور على نسخة الجوال بشكل مباشر

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

بعد





1- كود css



ظهور الصور بشكل مباشر في المواضيع وبعض الصور تبدو كبيره وتشوه المظهر وتظهر اخطأ لذه يجب أضافة اكود css التالي لتفادي هذه المشاكل
لوحة الأدارة >> مظهر المنتدى >> أللوان >> ورقة CSS
ادرج الكود التالي

الكود:
.mobile_image { max-width:99% }
#mpage-body .postbody > .content > div { overflow:hidden }

هذا سوف يقلل من حجم الصور بحيث تتناسب مع حجم الموضوع، وتمنعها من التجاوز.  Smile



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



لجعل ظهور الصور بطريقة مباشره في المواضيع يجب أضافة كود الجافاسكربت التالي
لوحة الأدارة >> العناصر الأضافية >> HTML و JAVASCRIPT >> إدارة أكواد Javascript >> + أنشاء كود جديد


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

الكود:
$(function() {
  var mode = 0;
  /* -- Options -- */
  // 0 : مشاهدة كل الصور الافتراضية
  // 1 : عرض الصور عند النقر فقط
 
  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;
      }
     
    }
  }
});

3- معلومات اضافية


الممكن لإجراء تغيير في هذا الكود . يتوفر على قيمتين متغيرات 1 او 0، وتغيير خيارات العرض من الصور.

وضع = 0: هذا هو الوضع الافتراضي، حدد 0 عرض جميع الصور. وهكذا،  .

وضع = 1: 1 كقيمة تشير، سيتم عرض الصور عند النقر على الرابط. تفضل هذا الخيار لضمان أسرع وقت التحميل في المنتدى النسخة الجوال .
avatar
عضو جديد
عدد المساهمات : 49
النقاط : 73
السٌّمعَة : 2
تاريخ التسجيل : 27/08/2015
معاينة صفحة البيانات الشخصي للعضو

الجوال رد: اظهار الصور مباشر بدون الضغط على زر اظهار / اخفاء للجوال

في الخميس نوفمبر 19, 2015 9:24 pm
بارك الله فيك
عضو جديد
عدد المساهمات : 47
النقاط : 49
السٌّمعَة : 0
تاريخ التسجيل : 20/07/2015
معاينة صفحة البيانات الشخصي للعضو

الجوال رد: اظهار الصور مباشر بدون الضغط على زر اظهار / اخفاء للجوال

في الأربعاء مارس 02, 2016 12:44 pm
طرحت فأبدعت يعطيك الف عافية
جهود مبارك جزاك الله خير
دمت ودام عطائك
ودائما بأنتظار جديدك الشيق
لك خالص تقديري واحترامي
دمت بخير
الرجوع الى أعلى الصفحة
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى