اذهب إلى المحتوى
  • 0

مشكلة في كود جافا سكربت لإظهار صور منتدى على نسخة الموبايل؟

kattan

السؤال

الكود التالي مُخصص لإظهار الصور على نسخة الموبايل لسكربت منتدى؛ يرتبط به كود css ولكنهما يقومان بإظهار الصور فقط دون تفعيل الرابط الخارجي الذي تحمله الصورة:

$(function() { var mode = 0; /* -- Mode Options -- */ // 0 : Shows all images by default // 1 : Shows images only when clicked 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; } } } }); css ثانيا كود .mobile_image { max-width:99% } #mpage-body .postbody > .content > div { overflow:hidden }

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

كنصيحة لك، حاول في المرات المُقبلة كتابة الكود بشكل منظّم، مما يتيح لمن أراد المساعدة فعل ذلك، فكتابة الكود بالطريقة التي فعلتَ غير مشجعة، بالاضافة إلى أن الكود غير مفهوم، لأنه مكتوب يطريقة عشوائية.

بالنسبة لتساؤلك حول كيفية إظهار الصور على نسخة محمول، أعتقد أن اطلاعك على التصميم المتجاوب كفيل بجعل الصور تظهر معدّلة على جميع مقاسات الهواتف وكذا الشاشات الكبيرة.

الطريقة:

<div class="mobileShow">

img   أضف الصورة هنا عن طريق وسم
</div>

كود cssM

    .mobileShow { display: none;}

   /* Smartphone Portrait and Landscape */

   @media only screen

   and (min-device-width : 320px)

   and (max-device-width : 480px){ .mobileShow { display: inline;}}

 

يمكن أيضا الاستعانة بإطار العملbootstrap، قم بزيارة دروس إطار عمل Bootstrap على الأكاديمية

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...