Zmiana elementów na aktywnym oknie

Question

Mam taki skrypt, pobiera kliknięty element i wyszarza background, pojawiają się ikony strzałek itd.
Mam otwarcie tego okna, zamknięcie. W jaki sposób mogę zorganizować galerie na zasadzie następny... następny... wcześniejszy.

<div class="image-container">
                <div class="container-fluid image">
                    <img class="img-fluid"src="{{ asset('assets/img/gallery/pizza1.png') }}" alt="Alternate text image">
                </div>
                <div class="container-fluid image">
                    <img class="img-fluid"src="{{ asset('assets/img/gallery/pizza2.png') }}" alt="Alternate text image">
                </div>
                <div class="container-fluid image">
                    <img class="img-fluid"src="{{ asset('assets/img/gallery/pizza3.png') }}" alt="Alternate text image">
                </div>
                <div class="container-fluid image">
                    <img class="img-fluid"src="{{ asset('assets/img/gallery/pizza4.jpg') }}" alt="Alternate text image">
                </div>
                <div class="container-fluid image">
                    <img class="img-fluid"src="{{ asset('assets/img/gallery/pizza5.jpg') }}" alt="Alternate text image">
                </div>
                <div class="container-fluid image">
                    <img class="img-fluid"src="{{ asset('assets/img/gallery/pizza6.jpg') }}" alt="Alternate text image">
                </div>
                <div class="container-fluid image">
                    <img class="img-fluid"src="{{ asset('assets/img/gallery/pizza1.png') }}" alt="Alternate text image">
                </div>
                <div class="container-fluid image">
                    <img class="img-fluid"src="{{ asset('assets/img/gallery/pizza1.png') }}" alt="Alternate text image">
                </div>
                <div class="container-fluid image">
                    <img class="img-fluid"src="{{ asset('assets/img/gallery/pizza1.png') }}" alt="Alternate text image">
                </div>
            </div>
            <div class="popup-image">
            <span>&times;</span>
            <span class="leftArrow">&LeftArrow;</span>
            <span class="rightArrow">&RightArrow;</span>
                <img class="img-fluid"src="{{ asset('assets/img/gallery/pizza1.png') }}" alt="Alternate text image">
</div>

document.querySelectorAll('.image-container img').forEach(image =>{
    image.onclick = () =>{
        document.querySelector('.popup-image').style.display = "block";
        document.querySelector('.popup-image img').src = image.getAttribute('src');
    }
});

document.querySelector('.popup-image span').onclick = () =>{
    document.querySelector('.popup-image').style.display = 'none';
}

 

Comments

Chce żeby po kliknięciu w strzałkę jedną lub drugą nie chowało mi się to okno, ale żeby pokazało się kolejne zdjęcie następne, lub wcześniejsze.

Answer 1

const images = document.querySelectorAll('.image-container img');
console.log(images.length);

images.forEach((image) => { ... }

Jak widzisz document.querySelectorAll('.image-container img') można też wykorzystać do "pobrania ilości" obrazków.

Dodaj Event click do strzałek, który będzie ładował kolejny obrazek

document.querySelector('.popup-image img').src = images[0].getAttribute('src');
document.querySelector('.popup-image img').src = images[1].getAttribute('src');
...
document.querySelector('.popup-image img').src = images[images.length - 1].getAttribute('src');

do sprawdzenia indeksu obrazka klikniętego możesz skorzystać np. z e.target i indexOf.

[...images].indexOf(e.target);

 

images.forEach((image) => {
  image.onclick = (e) => {
    document.querySelector('.popup-image').style.display = "block";
    document.querySelector('.popup-image img').src = image.getAttribute('src');
    
    if (images)  
      console.log([...images].indexOf(e.target));
  }
});

 

 

 

P.S.1

• Zmieniające się zdjęcia na stronie

• funkcja javascript

 

P.S.2 Ten zapis

elements.forEach((element) => {
  element.onclick = (e) => {
     ...
  }
});

można np. zapisać inaczej "używając":  JavaScript Event Delegation 

Comments

W odniesieniu do tego co powyżej  

<!--
  Kliknij w dowolny obrazek
-->
<div class="image-container">
  <div>
    <img src="https://picsum.photos/500/500/?random=1" />
  </div>
  <div>
    <img src="https://picsum.photos/500/500/?random=2" />
  </div>
  <div>
    <img src="https://picsum.photos/500/500/?random=3" />
  </div>
  <div>
    <img src="https://picsum.photos/500/500/?random=4" />
  </div>
  <div>
    <img src="https://picsum.photos/500/500/?random=5" />
  </div>
  <div>
    <img src="https://picsum.photos/500/500/?random=6" />
  </div>
  <div>
    <img src="https://picsum.photos/500/500/?random=7" />
  </div>
  <div>
    <img src="https://picsum.photos/500/500/?random=8" />
  </div>
  <div>
    <img src="https://picsum.photos/500/500/?random=9" />
  </div>
  <div>
    <img src="https://picsum.photos/500/500/?random=10" />
  </div>
  <div>
    <img src="https://picsum.photos/500/500/?random=11" />
  </div>
  <div>
    <img src="https://picsum.photos/500/500/?random=12" />
  </div>  
</div>
<dialog id="slider-dialog">  
  <span id="left-arrow">&#8678;</span>
  <span id="right-arrow">&#8680;</span>
  <span id="close-button">&times;</span>
  <img src="" />
</dialog>

* {
  box-sizing: border-box;
}
body {
  filter: none;
  transition: filter 0.4s ease;
}
.image-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 0.15rem 0.25rem;
  grid-template-areas:
    ". . . ."
    ". . . ."
    ". . . .";
  width: 60vw;
  margin: 1em auto;   
}
.image-container img {
  user-select: none;
  min-width: 200px;
  min-height: 200px;
  width: 100%;
}
dialog {
  position: relative;
  border-radius: 1em;
  user-select: none;
  cursor: default;
}
dialog span {
  position: absolute;
  cursor: pointer;
}
dialog span#left-arrow,
dialog span#right-arrow { 
  top: 50%;
  color: black;
  z-index: 99;
  transition: all 0.2s linear;
}
dialog span#left-arrow {
  left: 0.45rem;
}
dialog span#right-arrow {
  right: 0.45rem;
}
dialog span#close-button {
  top: 0.25rem;
  right: 0.3rem;
  transition: all 0.2s linear;
}
dialog span#left-arrow:hover,
dialog span#right-arrow:hover,
dialog span#close-button:hover {
  color: limegreen;
  border-radius: 100%;
  text-shadow:
    0 0 7px #fff, 0 0 10px #fff,
    0 0 21px #fff, 0 0 42px #0fa,
    0 0 82px #0fa, 0 0 92px #0fa,
    0 0 102px #0fa, 0 0 151px #0fa,
    0 0 162px #0fb, 0 0 171px #0fb;
  transform: scale(2);
}
dialog img {
  display: block;
  width: 400px;
  height: 400px;
  opacity: 1;
  transition: opacity 0.6s ease-in-out;
}
.off {
  filter: blur(5px) grayscale(1);
}
.fade {
  opacity: 0;
}

let slider_dialog, images;
window.addEventListener('load', load);

function load() {
  const image_container = document.querySelector('.image-container');
  images = document.querySelectorAll('.image-container img');
  slider_dialog = document.querySelector('#slider-dialog');

  image_container.addEventListener('click', openSlider);
  image_container.addEventListener('dragstart', (e) => { e.preventDefault(); });
  slider_dialog.addEventListener('click', sliderBox);
  slider_dialog.querySelector('img').addEventListener('dragstart', (e) => { e.preventDefault(); });
}

function sliderBox(e) {
  if (e.target.nodeName == 'SPAN') {
    switch (e.target.id) {
      case 'close-button': slider_dialog.close(); bodyToggle(); break;
      case 'left-arrow':   sliderBoxChangeImage(-1); break;
      case 'right-arrow':  sliderBoxChangeImage(+1); break;
    }
  }
}

function sliderBoxChangeImage(direction) {
  let index = parseInt(slider_dialog.dataset.imageIndex) + direction;
  index = (index < images.length - 1) ? ((index < 0) ?  images.length - 1 : index) : 0;

  const image = slider_dialog.querySelector('img');
  image.classList.add('fade');  
  setTimeout(_=> {
    image.src = images[index].src;
    setTimeout(_=> { image.classList.remove('fade'); }, 50);
  }, 500);

  slider_dialog.dataset.imageIndex = index; 
}

function openSlider(e) {
  if (e.target.nodeName == 'IMG') {
    if (typeof slider_dialog.showModal === "function") {
      slider_dialog.querySelector('img').src = e.target.src;
      slider_dialog.dataset.imageIndex = [...images].indexOf(e.target);
      slider_dialog.showModal();
      bodyToggle('off');
    }    
  }
}

function bodyToggle(cmd = 'on') {
  if (cmd == 'on') {
    document.body.classList.remove('off');
  } else {
    document.body.classList.add('off');
  }
}