ગેલેરી વેબસાઇટ માટે નેવિગેશન સાથે બહુવિધ મોડલ્સ બનાવવા

ઉકેલ 1: તીરો સાથે મૂળભૂત HTML, CSS અને JavaScript મોડલ

આ સોલ્યુશન નેવિગેશન મોડલ્સ માટે HTML, CSS અને વેનીલા 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 અભિગમ

આ અભિગમ માપનીયતા અને જાળવણીક્ષમતા સુધારવા માટે મોડ્યુલર 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 સરળ સંક્રમણો અને આકર્ષક અનુભવ માટે પરવાનગી આપે છે. શ્રેષ્ઠ પ્રથાઓને અનુસરવાથી ખાતરી થાય છે કે ગેલેરી પ્રતિભાવશીલ, સુલભ અને ભાવિ અપડેટ્સ સાથે વિસ્તરણ કરવા માટે સરળ છે.