Kelių modulių kūrimas naudojant galerijos svetainės naršymą

Vaizdų galerijos tobulinimas naudojant interaktyvius modulius

Vizualiai patraukli vaizdų galerija yra būtina šiuolaikinėms svetainėms, tačiau užtikrinti sklandų funkcionalumą naudojant modalus gali būti sudėtinga. Jei stengiatės įdiegti kelis savo galerijos darbo būdus, nesate vieni. Daugelis kūrėjų susiduria su problemomis, kai jų modalai neatsidaro tinkamai arba prieštarauja vienas kitam.

Modalų naudojimas ne tik leidžia lankytojams peržiūrėti vaizdus didesniu formatu, bet ir pagerina vartotojo patirtį. Pridedama naršymo rodyklės, panašus į platformas, tokias kaip „Facebook“ ar „Messenger“, dar labiau pagerina naudojimą, leisdamas vartotojams sklandžiai naršyti vaizdus kiekvieną kartą neuždarius modalo.

Šiame straipsnyje išnagrinėsime, kaip integruoti kelis modalus į HTML, CSS ir JavaScript sąranką. Taip pat sužinosite, kaip naudoti paprastas rodykles, kad būtų sukurta sklandi naršymo patirtis. Net jei bandėte kitus sprendimus, kurie neveikė, šis metodas turėtų pasiūlyti patikimą metodą šiems iššūkiams spręsti.

Pasinerkime į žingsnis po žingsnio sprendimas, užtikrinant, kad kiekvienas vaizdas jūsų galerijoje būtų atidarytas atskirai su naršymo rodyklėmis į kairę ir į dešinę. Atlikę tik keletą patobulinimų, galite pakelti savo galerijos naudotojo patirtį į kitą lygį.

Kaip modaliniai scenarijai pagerina jūsų galerijos svetainę

Modalinis funkcionalumas, įdiegtas pateiktame kode, užtikrina, kad vartotojai galėtų spustelėti bet kurį vaizdą ir peržiūrėti jį išplėstiniame, izoliuotame rodinyje neišeidami iš galerijos puslapio. Kiekvienas vaizdas galerijoje suaktyvina a modalinis, kuriame vaizdas rodomas viso dydžio kartu su naršymo rodyklėmis, kad būtų galima perjungti kitus vaizdus. Šis požiūris sustiprina vartotojo patirtį leidžiant lankytojams sklandžiai naršyti po visą galeriją pačiame modale, panašiai kaip socialinės žiniasklaidos platformose.

Pagrindinis šios funkcijos elementas yra JavaScript naudojimas renginio klausytojai. Kiekvienam vaizdui priskiriamas paspaudimo įvykis, kuris atidaro modalą ir dinamiškai atnaujina turinį pagal spustelėtą vaizdą. Antrajame sprendime naudojamas modulinis metodas sukuria keičiamo dydžio sistemą, įtraukdamas modalinį elgesį į klasę. Tai užtikrina, kad kodą būtų lengva prižiūrėti ir išplėsti, jei galerija ar jos funkcijos ateityje plės.

Modalo naršymas valdomas naudojant dvi rodykles – „kitas“ ir „ankstesnis“. Šios rodyklės naudoja „JavaScript“, kad atnaujintų rodomą vaizdą, padidinant arba sumažinant dabartinį indeksą su modulio operatorius užtikrinant, kad vaizdų rodyklė apvyniotų, kai pasiekiama galerijos pabaiga arba pradžia. Tai neleidžia vartotojui patekti į aklavietę naršymo metu ir užtikrina nuolatinį naršymą.

Naudojimas CSS Modalo ir rodyklių stilius užtikrina, kad dizainas būtų jautrus ir atitiktų šiuolaikinius žiniatinklio standartus. Modalas išlieka centre, nepaisant ekrano dydžio, o rodyklės sulygiuotos vertikaliai naudojant išverstiY() nuosavybė. Tai garantuoja, kad sąsaja išliks estetiška ir paprasta naudoti įvairiuose įrenginiuose. Visa struktūra, nuo HTML išdėstymo iki modulinės JavaScript klasės, užtikrina tvirtą, prižiūrimą ir patogią vartotojui galerijų sistemą.

// 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%);
}

// 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;
}

Galerijos modulių tobulinimas naudojant pritaikymo neįgaliesiems ir naudojimo ypatybes

Be kelių kūrimo modalai su navigacija, dar vienas esminis aspektas, į kurį reikia atsižvelgti, yra pasiekiamumo gerinimas. Įsitikinę, kad galerija yra prieinama naudotojams su negalia, jūsų svetainė bus įtraukta. Tai galima pasiekti pridedant atitinkamus ARIA atributus prie HTML elementų ir užtikrinant, kad visi vaizdai būtų prasmingi alt tekstą. Čia pateikiami ekrano skaitytuvų aprašai, todėl turinį gali skaityti silpnaregiai naudotojai.

Kitas svarbus naudojimosi veiksnys yra užtikrinti, kad vartotojai galėtų naršyti modaluose ir klaviatūra, ir pele. Tai galite pasiekti klausydami konkrečių klaviatūros įvykių, tokių kaip Pabėgti klavišą, kad uždarytumėte modalą, ir rodyklių klavišus, kad galėtumėte naršyti vaizdus. Įdiegę šias funkcijas pagerinsite galerijos funkcionalumą, todėl vartotojams bus pasiūlyta daug būdų su ja bendrauti. Be to, jautrus dizainas yra būtinas siekiant užtikrinti, kad modalai gerai atrodytų visų dydžių ekranuose – nuo ​​mobiliųjų telefonų iki didelių monitorių.

Galiausiai vaizdo įkėlimo optimizavimas gali labai paveikti jūsų galerijos našumą. Tingūs įkėlimo būdai, pavyzdžiui, pridėjimas kraunamas = tinginys atributą vaizdams, leisti juos įkelti tik tada, kai jie matomi vartotojui. Tai apsaugo nuo nereikalingo duomenų naudojimo ir pagreitina pradinį puslapio įkėlimą. Kartu su JavaScriptpagrįsti modalai, šie optimizavimai užtikrina sklandžią ir reaguojančią vartotojo patirtį įvairiuose įrenginiuose ir tinklo sąlygomis.