إنشاء نماذج متعددة مع التنقل لموقع المعرض

الحل 1: نموذج HTML وCSS وJavaScript الأساسي مع الأسهم

يوضح هذا الحل أسلوب الواجهة الأمامية فقط باستخدام HTML وCSS وVilla JavaScript لنماذج التنقل.

// HTML structure for each modal
<div class="modal" id="modal1">
  <span class="close" onclick="closeModal()">&times;</span>
  <img class="modal-content" id="img01">
  <div class="caption"></div>
  <div class="nav left" onclick="prevImage()">❮</div>
  <div class="nav right" onclick="nextImage()">❯</div>
</div>
// JavaScript to handle modal behavior
let currentImage = 0;
const images = document.querySelectorAll('.galleryimg');
const modal = document.getElementById('modal1');
const modalImg = document.getElementById('img01');
images.forEach((img, index) => {
  img.onclick = () => {
    openModal(index);
  };
});
function openModal(index) {
  currentImage = index;
  modal.style.display = "block";
  modalImg.src = images[index].src;
}
function closeModal() {
  modal.style.display = "none";
}
function nextImage() {
  currentImage = (currentImage + 1) % images.length;
  modalImg.src = images[currentImage].src;
}
function prevImage() {
  currentImage = (currentImage - 1 + images.length) % images.length;
  modalImg.src = images[currentImage].src;
}
// CSS for modal styling
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
}
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
}
.nav {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

الحل 2: نهج جافا سكريبت المعياري مع تفويض الأحداث

يستخدم هذا الأسلوب وظائف JavaScript المعيارية لتحسين قابلية التوسع وقابلية الصيانة.

// Modular JavaScript setup for gallery modal
class GalleryModal {
  constructor(images) {
    this.images = images;
    this.currentImage = 0;
    this.modal = document.querySelector('.modal');
    this.modalImg = this.modal.querySelector('.modal-content');
    this.attachEventListeners();
  }
  attachEventListeners() {
    this.images.forEach((img, index) => {
      img.addEventListener('click', () => this.open(index));
    });
    this.modal.querySelector('.left').addEventListener('click', () => this.prev());
    this.modal.querySelector('.right').addEventListener('click', () => this.next());
  }
  open(index) {
    this.currentImage = index;
    this.modal.style.display = 'block';
    this.modalImg.src = this.images[index].src;
  }
  next() {
    this.currentImage = (this.currentImage + 1) % this.images.length;
    this.modalImg.src = this.images[this.currentImage].src;
  }
  prev() {
    this.currentImage = (this.currentImage - 1 + this.images.length) % this.images.length;
    this.modalImg.src = this.images[this.currentImage].src;
  }
}
// Initialize the modal functionality
document.addEventListener('DOMContentLoaded', () => {
  const images = document.querySelectorAll('.galleryimg');
  new GalleryModal(images);
});
// Additional CSS Styling
.modal {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
}

أسئلة شائعة حول تنفيذ الوسائط باستخدام JavaScript

1. كيف أقوم بتشغيل مشروط باستخدام JavaScript؟
2. يمكنك استخدام addEventListener('click') لفتح المشروط عند النقر فوق الصورة.
3. كيف يمكنني إغلاق النموذج باستخدام لوحة المفاتيح؟
4. استمع ل keydown الحدث وتحقق مما إذا كان key === 'Escape' لإغلاق المشروط.
5. ما هي أسهل طريقة لتنفيذ التنقل بين الصور التالية والسابقة؟
6. يستخدم modulus (%) للتنقل بين الصور دون الوصول إلى نهاية القائمة.
7. كيف يمكنني التأكد من أن النموذج يعمل على الأجهزة المحمولة؟
8. يستخدم media queries في CSS واختبار التصميم على أحجام مختلفة من الشاشات.
9. ما هو التحميل البطيء وكيف يمكنني تنفيذه؟
10. يضيف loading="lazy" لك img علامات لتأجيل تحميل الصور حتى تكون في إطار العرض.

الختام مع الأفكار النهائية

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

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