علم سوفت مؤسس المنتدي
الدولة : الهوايه : المزاج : الجنس : عدد المساهمات : 2105 نقاط : 4340 السٌّمعَة : 4 تاريخ الميلاد : 05/08/1995 تاريخ التسجيل : 18/02/2015 العمر : 29
| موضوع: كود عرض الصور على النسخة المحمولة بنفس الصفحة السبت سبتمبر 12, 2015 6:10 pm | |
| مرحبا بكم اصدقائي الكثير كان ينزعج عندما يضغط على الصور في تصفحه نسخه الجوال وتكون الصوره بشكل منفصل اي بصفحه جديده تفتح في الجوال هذا البرنامج التعليمي سوف يشرح كيفية عرض الصور في المشاركات دون مغادرة الصفحة أو التحول إلى الكلاسيكية. الخطوات كالاتي : 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; } } } });
تحياتي لكم
- أهلا بكم في منتداكم:- منتديات علم سوفت-:
- يمنع وضــع مواضيع بغير مكانها الصحيح .
- الرجاء قراءة قوانين المنتدي والقوانين الخاصة بالاقسام قبل الكتابة بها .
- -(( لو لم تلقى منى ما تريد))- * توجه هنــــــــــــــــــا.
- عدم ردي على أي موضوع لك لايعني أني لم أرغب بالرد عليك وإنما الوقت محدود بالنسبه لي لظروفي الشـــخـصـيــــــه والعمل وأعباء أخرى لايعلمها غير ربي .
لطلبات الدعم الفنى هنــــــــــــــــــــــا
| |
|
zerguit عضو مجتهد
عدد المساهمات : 60 نقاط : 60 السٌّمعَة : 0 تاريخ الميلاد : 03/04/1993 تاريخ التسجيل : 12/09/2015 العمر : 31
| موضوع: رد: كود عرض الصور على النسخة المحمولة بنفس الصفحة الأربعاء سبتمبر 16, 2015 4:23 pm | |
| بارك الله فيك على الموضوع القيم والمميز وفي انتظار جديدك الأروع والمميز لك مني أجمل التحيات وكل التوفيق لك يا رب | |
|
رمادي ~ مدير المنتدي
الدولة : الهوايه : المزاج : الجنس : عدد المساهمات : 514 نقاط : 516 السٌّمعَة : 0 تاريخ التسجيل : 18/06/2015
| موضوع: رد: كود عرض الصور على النسخة المحمولة بنفس الصفحة الثلاثاء أكتوبر 13, 2015 8:17 am | |
| مجهود رآئع ومفعم بآلجمال وآلرقي.. يعطيك آلعافيه على هذآ آلتميز .. وسلمت آناملك آلمتألقه لروعة طرحهآ.. ودي لك ولروحك ,,~ | |
|
♥mohamed dz♥ عضو فعال
الدولة : الهوايه : المزاج : الجنس : عدد المساهمات : 136 نقاط : 136 السٌّمعَة : 0 تاريخ الميلاد : 18/02/2002 تاريخ التسجيل : 24/04/2016 العمر : 22
| موضوع: رد: كود عرض الصور على النسخة المحمولة بنفس الصفحة الأربعاء يوليو 06, 2016 11:51 am | |
| | |
|