Is there a way to navigate to the next or previous image in a lightbox by using ev.target.nextElementSibling or ev.target.prevElementSibling?

Question

Is there a way to navigate to the next or previous image in a lightbox by using ev.target.nextElementSibling or ev.target.prevElementSibling?

I am new to the world of web development

Currently, I'm facing an issue with my lightbox feature. I want to navigate between images by using ev.target.nextElementSibling and ev.target.prevElementSibling when clicking on the next/previous arrow.png icons. I have tried several solutions but haven't been successful so far. When I click on an image, it zooms in correctly, but when I click on the arrow, the image disappears instead of transitioning to the next/previous one.

const imgs = document.querySelectorAll('.gallery img');
const lightbox = document.querySelector('.lightbox');
const arrowNext = document.querySelector('.arrowNext');
for (let index = 0; index < imgs.length; index++) {
  const img = imgs[index];
  img.addEventListener('click', showLightbox);
}

function showLightbox(ev) {
  const prevEl = ev.target.prevElementSibling;
  const nextEl = ev.target.nextElementSibling;
  console.log(ev)
  const lightbox = document.querySelector('.lightbox');
  const img = document.querySelector('.lightbox img');
  const imgUrl = ev.target.src;
  img.src = imgUrl;

  lightbox.classList.add('visible');
}

lightbox.addEventListener('click', hideLightbox);

function hideLightbox() {
  lightbox.classList.remove('visible');
}

arrowNext.addEventListener('click', nextPhoto);

function nextPhoto(ev) {
  const arrowNext = document.querySelector('.arrowNext');
  const img = document.querySelector('.arrowNext img');
  const imgUrl = ev.target.src;
  img.src = imgUrl;
  const next = ev.target.nextElementSibling;
}

body {
  background: #eee;
}

.lightbox {
  position: absolute;
  z-index: 100;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  top: 0;
  left: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
  transform: scale(0);
}

.visible {
  transform: scale(1);
}

.lightbox img {
  max-width: 80%;
  max-height: 80%;
}

.arrowNext {
  cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lightbox</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <section class="gallery">
    <img src="/img/img1.jpg" alt="photo1">
    <img src="/img/img2.jpg" alt="photo2">
    <img src="/img/img3.jpg" alt="photo3">
    <img src="/img/img4.jpg" alt="photo4">
  </section>
  <div class="lightbox">
    <div class="arrowPrev">
      <img src="/img/prev arrow.png" alt="">
    </div>
    <img src="/img/img5.jp" alt="">
    <div class="arrowNext">
      <img src="/img/next arrow.png" alt="">
    </div>
  </div>
  <script src="main.js" type="text/javascript"></script>
</body>

</html>

javascript html css

Answer 1

Answer №1

Just a heads up, ev.target refers to the element that the mouse clicks on, which in this case is the arrow. What you actually want is to access the next image, not the next arrow.

I recommend using an index variable to keep track of which image is currently displayed, and then use

document.querySelectorAll('img')[index+1]

to retrieve the next image.

Your code might result in something like:

(Note: Using ev.stopPropagation() is essential to prevent closing the lightbox when the arrow is clicked.)

const imgs = document.querySelectorAll('.gallery img');
const lightbox = document.querySelector('.lightbox');
const arrowNext = document.querySelector('.arrowNext');

var index = 0;

for (let index = 0; index < imgs.length; index++) {
  const img = imgs[index];
  img.addEventListener('click', (e) => {showLightbox(e, index)});
}

function showLightbox(ev, i) {
  const prevEl = ev.target.prevElementSibling;
  const nextEl = ev.target.nextElementSibling;
  const lightbox = document.querySelector('.lightbox');
  const img = document.querySelector('.lightbox img');
  const imgUrl = ev.target.src;
  img.src = imgUrl;
  
  index = i;

  lightbox.classList.add('visible');
}

lightbox.addEventListener('click', hideLightbox);

function hideLightbox() {
  lightbox.classList.remove('visible');
}

arrowNext.addEventListener('click', nextPhoto);

function nextPhoto(ev) {
  ev.stopPropagation();
  index++;

  const arrowNext = document.querySelector('.arrowNext');
  const img = document.querySelector('.arrowNext img');
  const imgUrl = imgs[index].src;
  img.src = imgUrl;
}

body {
  background: #eee;
}

.lightbox {
  position: absolute;
  z-index: 100;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  top: 0;
  left: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
  transform: scale(0);
}

.visible {
  transform: scale(1);
}

.lightbox img {
  max-width: 80%;
  max-height: 80%;
}

.arrowNext {
  cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lightbox</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <section class="gallery">
    <img src="/img/img1.jpg" alt="photo1">
    <img src="/img/img2.jpg" alt="photo2">
    <img src="/img/img3.jpg" alt="photo3">
    <img src="/img/img4.jpg" alt="photo4">
  </section>
  <div class="lightbox">
    <div class="arrowPrev">
      <img src="/img/prev arrow.png" alt="">
    </div>
    <img src="/img/img5.jp" alt="">
    <div class="arrowNext">
      <img src="/img/next arrow.png" alt="" style="background:red;padding:20px">
    </div>
  </div>
  <script src="main.js" type="text/javascript"></script>
</body>

</html>

Answer 2

Just a heads up, ev.target refers to the element that the mouse clicks on, which in this case is the arrow. What you actually want is to access the next image, not the next arrow.

I recommend using an index variable to keep track of which image is currently displayed, and then use

document.querySelectorAll('img')[index+1]

to retrieve the next image.

Your code might result in something like:

(Note: Using ev.stopPropagation() is essential to prevent closing the lightbox when the arrow is clicked.)

const imgs = document.querySelectorAll('.gallery img');
const lightbox = document.querySelector('.lightbox');
const arrowNext = document.querySelector('.arrowNext');

var index = 0;

for (let index = 0; index < imgs.length; index++) {
  const img = imgs[index];
  img.addEventListener('click', (e) => {showLightbox(e, index)});
}

function showLightbox(ev, i) {
  const prevEl = ev.target.prevElementSibling;
  const nextEl = ev.target.nextElementSibling;
  const lightbox = document.querySelector('.lightbox');
  const img = document.querySelector('.lightbox img');
  const imgUrl = ev.target.src;
  img.src = imgUrl;
  
  index = i;

  lightbox.classList.add('visible');
}

lightbox.addEventListener('click', hideLightbox);

function hideLightbox() {
  lightbox.classList.remove('visible');
}

arrowNext.addEventListener('click', nextPhoto);

function nextPhoto(ev) {
  ev.stopPropagation();
  index++;

  const arrowNext = document.querySelector('.arrowNext');
  const img = document.querySelector('.arrowNext img');
  const imgUrl = imgs[index].src;
  img.src = imgUrl;
}

body {
  background: #eee;
}

.lightbox {
  position: absolute;
  z-index: 100;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  top: 0;
  left: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
  transform: scale(0);
}

.visible {
  transform: scale(1);
}

.lightbox img {
  max-width: 80%;
  max-height: 80%;
}

.arrowNext {
  cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lightbox</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <section class="gallery">
    <img src="/img/img1.jpg" alt="photo1">
    <img src="/img/img2.jpg" alt="photo2">
    <img src="/img/img3.jpg" alt="photo3">
    <img src="/img/img4.jpg" alt="photo4">
  </section>
  <div class="lightbox">
    <div class="arrowPrev">
      <img src="/img/prev arrow.png" alt="">
    </div>
    <img src="/img/img5.jp" alt="">
    <div class="arrowNext">
      <img src="/img/next arrow.png" alt="" style="background:red;padding:20px">
    </div>
  </div>
  <script src="main.js" type="text/javascript"></script>
</body>

</html>

Is there a way to navigate to the next or previous image in a lightbox by using ev.target.nextElementSibling or ev.target.prevElementSibling?

Answer №1

Similar questions

Issues with CodeIgniter paths causing disruption to CSS background-image declaration

Functionality fails to load correctly post completion of AJAX request

Endless cycle occurs when an asynchronous action is dispatched within useEffect

The query callback does not recognize 'done' as a function, leading to a

Prisma DB is a versatile database that excels in handling m-n

Is it possible to nest HTML within a Route component?

What types of numerical values is the Number data type capable of storing?

How do you efficiently include several elements within a single column in Boostrap 5?

Guide to making a reusable AJAX function in JavaScript

Creating a custom data type with a specific value in GraphQL

Passing a JSON file name as an argument to a command line in Node.js

Unlock the potential of accessing data from the parent controller within a child controller in AngularJS

Tips for utilizing process.stdin in Node.js with Javascript?

How can I reduce the delay in Angular 5 to a minimum?

Managing uncaught exceptions in node.js

Add the following code snippet below every second set of two paragraphs that are enclosed within h

When you scroll a fixed element on the page, the block is truncated

.load() not triggering for images that are not in the cache - jquery

Removing items dynamically from a list created using ng-repeat

Achieving a consistent user experience across both mobile and desktop devices without using a separate mobile version or media queries