منتديات تقنيات
يسعدنا تسجيلكم بالمنتدى اهلا بكم


كود اظهار الصور مباشرتا بنسخة الجوال

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل

كود اظهار الصور مباشرتا بنسخة الجوال

مُساهمة من طرف JAR7 في 02/03/16, 01:46 pm

كود اظهار الصور مباشرتا بنسخة الجوال

عرض الصور على نسخة الجوال بشكل مباشر

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

بعد





1- كود css



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

الرمز:
.mobile_image { max-width:99% }
#mpage-body .postbody > .content > div { overflow:hidden }

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



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 كقيمة تشير، سيتم عرض الصور عند النقر على الرابط. تفضل هذا الخيار لضمان أسرع وقت التحميل في المنتدى النسخة الجوال .



JAR7
مؤسس المنتدى


الجنس : انثى
عدد المساهمات : 2192
التقييم : 285
تاريخ التسجيل : 05/01/2016
اوسمتي : :10:10:10

معاينة صفحة البيانات الشخصي للعضو http://www.t3qnyiat.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود اظهار الصور مباشرتا بنسخة الجوال

مُساهمة من طرف AmEr 3OshA8 في 04/03/16, 11:13 am

شكرا لكي خالتو ع الكود الرائع 
تسلم ايدك



AmEr 3OshA8
عضو نشيط


الجنس : ذكر
عدد المساهمات : 143
التقييم : 24
تاريخ الميلاد : 11/12/1995
تاريخ التسجيل : 27/02/2016
العمر : 20
الموقع : قلبى
العمل/الترفيه : السباحه طبعا
المزاج : تأليف بن شرابى (أمير حروفه تلاطم بعضها..كثر الزين ما تعرف وين تناظر أدب واحترام ونظام واتباع..يستاهل لقب المبدع الشاطر)

معاينة صفحة البيانات الشخصي للعضو http://www.ahlawarsh.net/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود اظهار الصور مباشرتا بنسخة الجوال

مُساهمة من طرف General Mohamed في 05/03/16, 10:09 pm

شكرا لك حبيبي

General Mohamed
عضو نشيط


عدد المساهمات : 24
التقييم : 11
تاريخ التسجيل : 29/02/2016

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود اظهار الصور مباشرتا بنسخة الجوال

مُساهمة من طرف المصمم الليلي في 06/03/16, 12:42 am

سلمت الايادي الطيبة ........
في الابداع والتواصل المستمر
في نشر الجديد والمفيد
أُحييك على اختيارك الرائع والمميز..
تحياتي لك  

المصمم الليلي
عضو نشيط


الجنس : ذكر
عدد المساهمات : 192
التقييم : 8
تاريخ التسجيل : 27/02/2016
اوسمتي : :1:0:0

معاينة صفحة البيانات الشخصي للعضو http://arab-ibda3.0wn0.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود اظهار الصور مباشرتا بنسخة الجوال

مُساهمة من طرف Okay ! في 09/03/16, 06:20 pm

يعطيك العافيه عع الطرحح المميز 

Okay !
عضو نشيط


الجنس : انثى
عدد المساهمات : 22
التقييم : 12
تاريخ الميلاد : 28/04/2000
تاريخ التسجيل : 09/03/2016
العمر : 16
الموقع : ككفآِيهه إنني ععشتت ف دآرنن تتآريخخهآ قآبوؤسس ء :$
العمل/الترفيه : قائدةة كتيبة ة ألقصصفف ألججوي _متقآعدهه !
المزاج : مآفي احد يششتاقلكك كثري أنآ $: ~

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود اظهار الصور مباشرتا بنسخة الجوال

مُساهمة من طرف Black Love في 20/03/16, 09:29 pm

كود اكثر من رآئع ششكرآ ~~♥



Black Love
عضو نشيط


الجنس : ذكر
عدد المساهمات : 96
التقييم : 15
تاريخ التسجيل : 19/03/2016
الموقع : المغرب ~~♥
العمل/الترفيه : مصمم جرافيك و مككود وسسباح ايضا هع ♥
المزاج : ~~ ححلو النهردهه هع ♥

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود اظهار الصور مباشرتا بنسخة الجوال

مُساهمة من طرف Mr.Yakoub في 16/04/16, 09:28 pm

كالعادة ابداع رائع 

وطرح يستحق المتابعة

شكراً لك 

بانتظار الجديد القادم
دمت بكل خير

Mr.Yakoub
الاشراف العام


الجنس : ذكر
عدد المساهمات : 548
التقييم : 3
تاريخ التسجيل : 28/02/2016
اوسمتي : :1:0:0

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود اظهار الصور مباشرتا بنسخة الجوال

مُساهمة من طرف Judy في 19/07/16, 07:57 am

السلام عليكم ورحمة الله وبركاته
ألف شكر لكَ على هذا الموضوع المميز و المعلومات القيمة
إنـجاز أكثر رائــــــع
لكن أرجو منكَ عدم التوقف عند هذا الحد
مـنتظرين ابداعتــــــك
دمتـ ودام تألقـك
تحياتــي

Judy
عضو نشيط


الجنس : انثى
عدد المساهمات : 364
التقييم : 15
تاريخ التسجيل : 23/04/2016

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة

إنشاء حساب أو تسجيل الدخول لتستطيع الرد

تحتاج إلى أن يكون عضوا لتستطيع الرد.

انشئ حساب

يمكنك الانضمام لمنتديات تقنيات فعملية التسجيل سهله !


انشاء حساب جديد

تسجيل الدخول

اذا كنت مسجل معنا فيمكنك الدخول بالضغط هنا


تسجيل الدخول

 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى