Javascript Képgaléria lapozása csak elsőre jó

Javascript Képgaléria lapozása csak elsőre jó
2020-12-09T16:34:13+01:00
2020-12-10T11:01:06+01:00
2022-12-06T15:00:38+01:00
GZolee79
Sziasztok!

Megint a képgalériával kapcsolatban merült fel probléma.
A lényeg az, hogy ha mondjuk van egy 4 képből álló galériám akkor először megnyitom, szépen végig is tudok rajta lépkedni.
Viszont ha bezárom akkor az
Első bezárás és újranyitás után az a 1. után a 3. jön, 
Második bezárás és újranyitás után az 1. után a 4. jön.
Mintha valami rekurzió lenne, pedig elvileg nem írtam bele

Amikor a javascript kódot sorról sorra léptettem a webdeveloperrel, akkor látszik, hogy jól rakja ki, de tovább is lép és kirakja az utána következő képet.
Nem igazán értem miér ugrik elsőzör 1-et, aztán 2-őt.
HTML kód:

<div id="gallery_background"> <nav id="gallery_headline"> <div id="gallery_close" onClick="close_gallery();"></div> </nav> <div id="previous_picture" class="nav_button" data-current-id="0"></div> <div id="gallery_place_of_picture" class="gallery_place_of_picture" > </div> <div id="next_picture" class="nav_button" data-current-id="0"></div> </div>
Javascript kód:
Az images_list : Képek listája ";" -vel elválasztva

function open_gallery(images_list, place_id) { let gallery_background = document.getElementById('gallery_background'); let images = images_list.split(';'); let gallery_place_of_picture = document.getElementById("gallery_place_of_picture"); let next_button = document.getElementById('next_picture'); next_button.setAttribute("data-current-id", 0); next_button.addEventListener('click', function() {nextPictureClick.call(this, images.length, this.dataset.currentId);}); let previous_button = document.getElementById('previous_picture'); previous_button.classList.add('inactive_nav_button'); let i; let image_layer = 1; for (i = images.length - 1; i>=0; i--) { let img = document.createElement('img'); if (i != 0) { img.style.display = "none"; } else { img.style.display = "block"; } img.src = "gallery/full_size/place_" + place_id + "/" + images[i]; img.id = "image_" + i.toString(); gallery_place_of_picture.appendChild(img); image_layer++; } gallery_background.style.display = "block"; } function close_gallery() { let gallery_background = document.getElementById('gallery_background'); let gallery_place_of_picture = document.getElementById("gallery_place_of_picture"); if (gallery_place_of_picture.innerHTML != '') { gallery_place_of_picture.innerHTML = ''; } gallery_background.style.display = "none"; } //countPictures: képek száma //current_id: Aktuális kép sorszáma function nextPictureClick(countPictures, current_id) { let current_picture_id = "image_" + current_id; let current_picture = document.getElementById(current_picture_id); let next_id = parseInt(current_id) + 1; let next_picture_id = "image_" + next_id; let next_picture = document.getElementById(next_picture_id); if (next_picture) { //ide jöhet majd animáció a képek áttűnéséhez current_picture.style.display = "none"; next_picture.style.display = "block"; //----------------------------------------- current_id = parseInt(current_id) + 1; this.dataset.currentId = current_id; next_id = parseInt(current_id) + 1; next_picture_id = "image_" + next_id; next_picture = document.getElementById(next_picture_id); }
Nagyjából ennyi a kicsit lecsupaszított kód:
A lényeget a nextPictureClick csinálná.
Olyan mintha 2-szer futna le először, következő alkalommal meg 3-szor.

Hol lehet a hiba a "képben" ?

Előre is köszönöm a választ(válaszokat) 


Üdv:
Z.
Mutasd a teljes hozzászólást!
A probléma az, hogy minden 'open_gallery' funkció híváskor felíratkozol a 'next_button' click event-re. 2 Egyszerű megoldás van, vagy simán felűlírod az onclick funkcióját, vagy pedig felíratkozás előtt leíratkozol:

next_button.onclick = function () { nextPictureClick.call(this, images.length, this.dataset.currentId); }
// VAGY

function onNextClick() { nextPictureClick.call(this, images.length, this.dataset.currentId); } next_button.removeEventListener('click', onNextClick); next_button.addEventListener('click', onNextClick);
Mutasd a teljes hozzászólást!

  • Nem néztem végig a kódot, de valószínűnek tartom, hogy a bezáráskor (close_gallery?) nem "takarítasz ki" magad után és/vagy megnyitáskor (open_gallery?) nem inicializálod a dolgaidat.
    Kezdj neki a hibakeresésnek pl. egy egyszerű console.log hívással (elsőre mondjuk a nexPictureClick-ben kapott paramétereket kiírhatnád a konzolra + current_picture_id-t és társait, amik alapján kideríthető a hibás állapot miértje)!
    Mutasd a teljes hozzászólást!
  • Elsőre az a gáz vele, hogy kevered az adatokat a dom elemekkel, így nehéz tesztelni.

    Az tuti hogy felesleges this-t használni. Ott van az arrow function az a definiálás környezetét látja.

    if (i != 0) { img.style.display = "none"; } else { img.style.display = "block"; } // helyett sokkal olvashatóbb a: img.style.display = i != 0 ? "none" : "block";

    Bár érzésem szerint felesleges egy kódrészlet.

    Csináld meg úgy a programodat, hogy n képre működjön és horizontális lehessen scrollozni mobilon is.
    Mutasd a teljes hozzászólást!
  • Szia!

    Próbáltam  a hibakeresést. Ugyan nem console-re írattam ki, hanem beiktattam alert-eket. és futattam soronként a kódot.
    Ilyenkor látszik, hogy a képeket jól teszi ki, csak valamiért mégegyszer elindul a nextPictureClick funkció és rögtön eltűnik kép és csak a következőnél áll meg. Csak mikor nem soronként futtatom ez olyan gyorsan történik, hogy nem látom
    Mikor 3. -ra nyitom meg, akkor, ugyanez, de akkor már 2 képet ugrik át.
    Ha frissítem az oldalt, akkor újra jó. De csak jó lenne tudni mi a hiba.
    Elvileg az open_gallery-be ez a sor visszaállítja nullára a kezdőkép sorszámát:
    next_button.setAttribute("data-current-id", 0);
    Miket kellene még kitakarítani?
    Mutasd a teljes hozzászólást!
  • Hali!

    Bocs, az mit jelent, hogy keverem a DOM elemeket és az adatokat? Sajnos nem értem, hogy konkrétan mire gondolsz...

    Sajnos az az arrow funkciót sem ismerem de utána nézek.

    Elvileg a program n képre működik (vagyis fog egyszer, remélem :
    Mutasd a teljes hozzászólást!
  • A probléma az, hogy minden 'open_gallery' funkció híváskor felíratkozol a 'next_button' click event-re. 2 Egyszerű megoldás van, vagy simán felűlírod az onclick funkcióját, vagy pedig felíratkozás előtt leíratkozol:

    next_button.onclick = function () { nextPictureClick.call(this, images.length, this.dataset.currentId); }
    // VAGY

    function onNextClick() { nextPictureClick.call(this, images.length, this.dataset.currentId); } next_button.removeEventListener('click', onNextClick); next_button.addEventListener('click', onNextClick);
    Mutasd a teljes hozzászólást!
  • Hali!

    Egyelőre csak az 1. megoldásodat próbáltam és jó lett!
    Tényleg egyszerű volt a megoldás. Főleg így, hogy megmondtad.

    Köszi!
    Mutasd a teljes hozzászólást!
  • arrow function : Arrow functions
    Mutasd a teljes hozzászólást!
  • Köszi!

    Azt hiszem kezdem kapisgálni :)
    Mutasd a teljes hozzászólást!
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd