اظهار الصور مباشر بدون الضغط على زر اظهار / اخفاء للجوال
الأحد نوفمبر 01, 2015 7:23 am
عرض الصور على نسخة الجوال بشكل مباشر
يتم عرض الصور بشكل افتراضي على النسخة المحمولة من المنتديات. هذا الدرس سوف يشرح كيفية عرض الصور في المشاركات دون مغادرة الصفحة أو التحول إلى الكلاسيكية.
قبل
بعد
1- كود css
ظهور الصور بشكل مباشر في المواضيع وبعض الصور تبدو كبيره وتشوه المظهر وتظهر اخطأ لذه يجب أضافة اكود css التالي لتفادي هذه المشاكل
لوحة الأدارة >> مظهر المنتدى >> أللوان >> ورقة CSS
ادرج الكود التالي
- الكود:
.mobile_image { max-width:99% }
#mpage-body .postbody > .content > div { overflow:hidden }
هذا سوف يقلل من حجم الصور بحيث تتناسب مع حجم الموضوع، وتمنعها من التجاوز.
2- كود الجافاسكربت
لجعل ظهور الصور بطريقة مباشره في المواضيع يجب أضافة كود الجافاسكربت التالي
لوحة الأدارة >> العناصر الأضافية >> HTML و JAVASCRIPT >> إدارة أكواد Javascript >> + أنشاء كود جديد
العنوان * : اظهار الصور لنسخة الجوال بشكل مباشر
أضف الكود الى : جميع الصفحات
الممكن لإجراء تغيير في هذا الكود . يتوفر على قيمتين متغيرات 1 او 0، وتغيير خيارات العرض من الصور.
وضع = 0: هذا هو الوضع الافتراضي، حدد 0 عرض جميع الصور. وهكذا، .
وضع = 1: 1 كقيمة تشير، سيتم عرض الصور عند النقر على الرابط. تفضل هذا الخيار لضمان أسرع وقت التحميل في المنتدى النسخة الجوال .
أضف الكود الى : جميع الصفحات
- الكود:
$(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 كقيمة تشير، سيتم عرض الصور عند النقر على الرابط. تفضل هذا الخيار لضمان أسرع وقت التحميل في المنتدى النسخة الجوال .
- Io-Interactiveعضو جديد
- عدد المساهمات : 49
النقاط : 73
السٌّمعَة : 2
تاريخ التسجيل : 27/08/2015
رد: اظهار الصور مباشر بدون الضغط على زر اظهار / اخفاء للجوال
الخميس نوفمبر 19, 2015 9:24 pm
بارك الله فيك
- JAR7عضو جديد
- عدد المساهمات : 47
النقاط : 49
السٌّمعَة : 0
تاريخ التسجيل : 20/07/2015
رد: اظهار الصور مباشر بدون الضغط على زر اظهار / اخفاء للجوال
الأربعاء مارس 02, 2016 12:44 pm
طرحت فأبدعت يعطيك الف عافية
جهود مبارك جزاك الله خير
دمت ودام عطائك
ودائما بأنتظار جديدك الشيق
لك خالص تقديري واحترامي
دمت بخير
جهود مبارك جزاك الله خير
دمت ودام عطائك
ودائما بأنتظار جديدك الشيق
لك خالص تقديري واحترامي
دمت بخير
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى