My lightbox is not working

Hello everyone!

I have a problem and I don’t know where it comes from :

I can open my lightbox but the navigation and the images don’t work well, when I click on a image, only the first media opens (the video with the horses) and I have no error messages in the console.

Here is my GitHub Pages : FishEye - Profil photographe

Here is my lightbox folder :

export default class Lightbox {

    constructor(medias, currentMedia) {

      this.element = document.getElementById('lightbox');

      this.content = document.getElementById('lightbox-content');

      this.next = this.next.bind(this);

      this.previous = this.previous.bind(this);

      this.close = this.close.bind(this);

      this.medias = medias;

      this.currentMedia = currentMedia;

      this.createMedias();

      this.element.classList.add('open');

      this.registerEvents();

    }

    createMedias() {

     

    this.content.innerHtml = '';

     

    this.medias.forEach((media) => {

       

        const mediaDom = document.createElement('img');

       

        mediaDom.src = media.url;

        if (media.id === this.currentMedia) {

          mediaDom.classList.add('active');

         

        }

        this.content.appendChild(mediaDom);

        console.log(mediaDom)

        console.log(this.currentMedia)

       

      });

    }

   

    close() {

      this.element.classList.remove('open');

      this.element.querySelector('#lightbox-next').removeEventListener('click', this.next);

      this.element.querySelector('#lightbox-previous').removeEventListener('click', this.previous);

      this.element.querySelector('#lightbox-close-btn').removeEventListener('click', this.close);

      console.log('juste ici')

    }

   

    registerEvents() {

      this.element.querySelector('#lightbox-next').addEventListener('click', this.next);

      this.element.querySelector('#lightbox-previous').addEventListener('click', this.previous);

      this.element.querySelector('#lightbox-close-btn').addEventListener('click', this.close);

    }

   

    next() {

      console.log('ici')

      let currentElement = this.content.querySelector('img.active');

      currentElement.classList.remove('active');

     

      if (currentElement.nextSibling === null) {

        currentElement = this.content.querySelector('img:first-child');

        console.log(currentElement)

      } else {

        currentElement = currentElement.nextSibling;

        console.log(currentElement)

      }

      currentElement.classList.add('active');

      console.log(currentElement)

      console.log(this.content)

    }

   

    previous() {

      let currentElement = this.content.querySelector('img.active');

      currentElement.classList.remove('active');

      if (currentElement.previousSibling === null) {

        currentElement = this.content.querySelector('img:last-child');

      } else {

        currentElement = currentElement.previousSibling;

      }

      currentElement.classList.add('active');

    }

  }

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.