Obsluga zdarzenia, prosta galeria zdjec

0

Witam moi drodzy, mam pewien problem z prosta galeria zdjec mam taka petelke :

let i = 1;
while (photo[i]) {
  var newImage = document.createElement('img');
  newImage.setAttribute('src', photo[i]);
  newImage.setAttribute('alt', "Image no " + i);
  newImage.setAttribute('id', 'img' + i);
  newImage.setAttribute('onclick', (() => {
    let temp = displayedImage.getAttribute("src");
    console.log(event.target.src);
    displayedImage.src = event.target.getAttribute("src"); 
    event.target.src = temp;
   }));
  thumbBar.appendChild(newImage);
  i++;
}

niestety ten "onclick" ktory wrzucam do kazdego zdjecia w miniaturce nie do konca dziala, nie wywoluje przypisanej mu funkcji.
Pytanie dlaczego? Moze zamiast robic to w ten sposob puscic osobna petle z addEventListener'ami?

0

To może zamiast onClick() addEventListener('click', function(){...}) zadziała ?
onClick() jest chyba dla komponentów Reactowych tylko, ale za to ręki sobie nie dam uciąć

0

Spróbuj tak:

<script>
function czytaj_src(displayedImage) {
  console.log(displayedImage.src);
  // nie mam pojęcia, co w założeniach miały robić te dwie linie
  // displayedImage.src = event.target.getAttribute("src"); 
  // event.target.src = temp;
}


thumbBar = document.getElementById("thumbBar");

photo = new Array();
photo[1] = "abc.jpg";
photo[2] = "def.jpg";

let i = 1;
while (photo[i]) {
  var newImage = document.createElement('img');
  newImage.setAttribute('src', photo[i]);
  newImage.setAttribute('alt', "Image no " + i);
  newImage.setAttribute('id', 'img' + i);
  newImage.setAttribute('onclick', "czytaj_src(this)");
  thumbBar.appendChild(newImage);
  i++;
}
</script>
1

Dobra, chyba już kumam, co to miało robić, czyli coś w stylu:

<script>
function czytaj_src(miniatura_kliknieta) {
  console.log(miniatura_kliknieta.src);
  obraz_duzy.src = miniatura_kliknieta.src;
}

obraz_duzy = document.getElementById("TU ID POWIĘKSZONEJ GRAFIKI");
thumbBar   = document.getElementById("thumbBar");


photo = new Array();
photo[1] = "abc.jpg";
photo[2] = "def.jpg";

let i = 1;
while (photo[i]) {
  var newImage = document.createElement('img');
  newImage.setAttribute('src', photo[i]);
  newImage.setAttribute('alt', "Image no " + i);
  newImage.setAttribute('id', 'img' + i);
  newImage.setAttribute('onclick', "czytaj_src(this)");
  thumbBar.appendChild(newImage);
  i++;
}
</script

Inna sprawa, że jeśli "miniatura" i pełnowymiarowy obraz ma mieć to samo src, to nie ma tu żadnej oszczędności i równie dobrze możesz odbiorcy wyświetlić od razu wszystkie grafiki w pełnym wymiarze. Wtedy przynajmniej będzie się to szybciej przeglądać :)

0

Dzieki za pomoc troche przekombinowalem to wszystko :p dziwi mnie tylko dlaczego nie moge dac tutaj:

  newImage.setAttribute('onclick', "czytaj_src(this)");

bezimiennej funckcji strzalkowej w ten sposob

newImage.setAttribute('onclick', (() => {
    displayedImage.src = event.target.src;
  })); 

Pierwsze co mi przyszlo do glowy pewnie przegladarka ma z tym problem wiec szybko odpalilem webpacka, niestety to tez nie przynioslo porzadanych rezultatow co wiecej podpowiedziane przez Ciebie rozwiazanie rowniez przestalo dzialac. W konsoli wyrzuca mi komunikaty

Line 18 'changePhoto' is defined but never used no-unused-vars
ReferenceError: changePhoto is not defined

I jak zyc? Troche to dziwne :/

0

Ale w moim skrypcie nie ma żadnego changePhoto.

A co do reszty: po co tam w ogóle ładujesz funkcję natychmiastową zamiast zapodania ciągu poleceń? Poza tym skąd skrypt ma znać wartość event?

0

W sumie to możesz tak:

<img id="duzy">
<div id="thumbBar"></div>
<script>
obraz_duzy = document.getElementById("duzy");
thumbBar   = document.getElementById("thumbBar");

photo = new Array();
photo[1] = "abc.jpg";
photo[2] = "def.jpg";

let i = 1;
while (photo[i]) {
  var newImage = document.createElement('img');
  newImage.setAttribute('src', photo[i]);
  newImage.setAttribute('alt', "Image no " + i);
  newImage.setAttribute('id', 'img' + i);
  newImage.setAttribute('onclick', "obraz_duzy.src = '" + photo[i] + "'");
  thumbBar.appendChild(newImage);
  i++;
}
</script>

1 użytkowników online, w tym zalogowanych: 0, gości: 1