Zmiana obrazka, oraz opisu pod nim po kliknięciu

[Olsz4k]

Witam, napotkałem pewien problem, a jako że jestem w js zielony, zwracam się do Was z prośbą.
Na stronie widnieje jedno zdjęcie, a pod nim w 3 kolumnach (do każdej z osób) krótki opis. Chcę uzyskać taki efekt, aby po kliknięciu w zdjęcie, pierwsze zdjęcie zniknęło, pokazało się drugie i nastąpiła podmiana opisów (do drugiego zdjęcia potrzebne będą tylko 2 krótkie opisy, bo znajdują się tam 2 osoby).
Udało mi się jedynie z pomocą poradników napisać coś takiego, co podmienia tylko zdjęcia:

Kod:

<script>
var tImg = ['img/zespol-img-1.jpg','img/zespol-img-2.jpg'];
        
var vImg = true;
function fSetImg(){
    if (vImg){
        document.getElementById('iImg').src = tImg[1];
    
        vImg = false;
        
        
    }
    
    else {
        document.getElementById('iImg').src = tImg[0];
        vImg = true;
    }
}
        </script>

I działa to dosyć ładnie (choć nie ukrywam że przydała by się jakaś animacja). Problem następuje z opisami - nie mogę sobie z tym poradzić.
Za wszelką pomoc serdecznie dziękuję.

[Kartofelek]

Źle kobinujesz. Przystępność - pamiętaj o tym.
Stwórz 2 oddzielne divy. Jeden z jednym zdjęciem i opisami, drugi też ze zdjęciem i opisami itp.
Potem za pomocą js pokazuj odpowiedni, a resztę ukrywaj.
Jak ktoś nie będzie miał JS zobaczy oba. U ciebie zobaczy tylko jeden i tyle.

[Olsz4k]

Tak, tylko że jedno zdjęcie nakłada się na drugie, to samo z opisami. Nie ma możliwości aby były widoczne 2 fotki naraz, oraz wszystkie 5 opisów.
Mam wszystko w 1 divie, tylko nie bardzo wiem jak to zrobić, aby akurat po kliknięciu w zdjęcie (tylko i wyłącznie) nastąpiła ta podmiana.

[Kartofelek]

Kod:

var current = 0;
var images = [
    'img/zespol-img-1.jpg',
    'img/zespol-img-2.jpg',
   ,'img/zespol-img-3.jpg',
     ..............
];
var description = [
   ['opis 1', 'opis2', 'opis3'],
   ['opis 1', '', 'opis3'],
   ['opis 1', 'opis2', 'opis3'],
   .......................
];

function $(id) {
   return document.getElementById(id);
}

$('iImg').onclick = function() {
     this.src = images[current];
     $('kolumna1').innerHTML = description[current][0];
     $('kolumna2').innerHTML = description[current][1];
     $('kolumna3').innerHTML = description[current][2];
     current++;
     if (current > images.length) current = 0;
}

Pod obrazkiem masz 3 kolumny - #kolumna1, #kolumna2, #kolumna3

To tak łopatologicznie.

[Olsz4k]

Dziękuję za pomoc Kartofelek, niestety próbowałem to zrobić na "sucho" i dalej nic, nawet sama podmiana obrazków nie działa.

Kod:

<script>
var current = 0;
var images = [
     'img/zespol-img-1.jpg',
     'img/zespol-img-2.jpg',
];
var description = [
    ['opis 1', 'opis2', 'opis3'],
    ['opis 1', '', 'opis3'],
];

function $(id) {
    return document.getElementById(id);
}

$('iImg').onclick = function() {
      this.src = images[current];
      $('kolumna1').innerHTML = description[current][0];
      $('kolumna2').innerHTML = description[current][1];
      $('kolumna3').innerHTML = description[current][2];
      current++;
      if (current > images.length) current = 0;
}

</script>


<div id="iImg">
    <img src="img/zespol-img-1.jpg">
</div>

<div id="kolumna1"></div>
<div id="kolumna2"></div>
<div id="kolumna3"></div>

Co robię nie tak?

PS. Muszę się wziąć porządnie za naukę JS bo widzę że z czasem mi się przyda, a słabo to łapie.

[Kartofelek]

Skrypt wrzuć na koniec. Nie tworzyłem ci tam podpinania ewentów po załadowaniu dokumentu. Dlatego skrypt nie widzi obiektów, które są dopiero po nim. Ogólna zasada - skrypty na końcu.

[Olsz4k]

Super, zaczęło działać, jednak nie do końca tak jak powinno.
Przy wejściu na stronę zdjęcie się wyświetla, niestety brakuje wtedy opisów. Po pierwszym kliknięciu pokazują się opisy, po drugim kliknięciu dopiero zamieniają się obrazki i poprawnie wyświetlają 2 opisy (czyli tu jest ok), a przy trzecim kliknięciu powinno wracać do pierwszego obrazka (do tego powinny być jeszcze opisy) ale nie robi tak - następuje kolejna podmiana z tym że obrazek się już nie wyświetla (bo trzeciego nie ma) i wyświetlają się opis1 i opis3.
Czy mogę prosić o pomoc jeszcze w poprawie tego?

[Kartofelek]

Przenieś current++ na początek funkcji. Resztę zmień sam. Początkowe opisy powinny być ustawione na sztywno w html, a jak nie to podstaw je JS tak samo jak zrobiłem to w funkcji

[Olsz4k]

Dzięki, przerobiłem na tyle ile umiałem, tzn. wszystko jest ok, tylko nie wraca do pierwszego obrazka będąc na drugim. (krótko mówiąc powinna być możliwość klikania w kółko z podmianą obrazka i opisów)

Kod:

<script>
var current = 0;
var images = [
     'img/zespol-img-1.jpg',
     'img/zespol-img-2.jpg',
];
var description = [
    ['opis1', 'opis2', 'opis3'],
    ['opis1', '', 'opis3'],
];

function $(id) {
    return document.getElementById(id);
}

$('iImg').onclick = function() {
  current++;
      this.src = images[current];
      $('kolumna1').innerHTML = description[current][0];
      $('kolumna2').innerHTML = description[current][1];
      $('kolumna3').innerHTML = description[current][2];
  
    
      if (current = images.length) current = 0;
      
      
      
      
}


</script>

Za dalszą pomoc dziękuję

[Kartofelek]

f (current = images.length) current = 0;
0 zamień na -1