javascript – Displaying galleries in a loop

Question:

How to display several galleries in a loop, I've already tried "350" plugins, none of them solved my problem, maybe I'm doing something wrong, but the point is, when I click on an image, my state changes and a lightbox opens, one should open. something, but all open, and it turns out that the last gallery overlaps all the others. How to solve this problem? I am using this plugin

Here is the component code:

import React, {Component} from "react";
import Swiper from "react-id-swiper";
import Lightbox from "react-images";


class ObjectGallery extends Component {


constructor(props) {
    super(props);


    this.swiper = null;
    this.state = {
        currentImage: 0,
        lightboxIsOpen: false


    };
    this.closeLightbox = this.closeLightbox.bind(this);
    this.gotoNext = this.gotoNext.bind(this);
    this.gotoPrevious = this.gotoPrevious.bind(this);
    this.openLightbox = this.openLightbox.bind(this);
    this.handleClickImage = this.handleClickImage.bind(this);
    console.log(props);
}


openLightbox(e, i) {
    e.preventDefault();
    // arr[i] = true;
    this.setState({
        currentImage: i,
        lightboxIsOpen: true,
    });
    console.log(i);

}

closeLightbox(e, i) {
    // arr[i] = false;
    this.setState({
        currentImage: 0,
        lightboxIsOpen: false,
    });
    console.log(i);
}

gotoPrevious() {
    this.setState({
        currentImage: this.state.currentImage - 1,
    });
}

gotoNext(e, i) {
    this.setState({
        currentImage: this.state.currentImage + 1,
    });
    console.log(i)
}

handleClickImage() {
    if (this.state.currentImage === this.props.images.length - 1) return;

    this.gotoNext();
}

renderGallery() {

    const PARAMS = {


        spaceBetween: 30,
        slidesPerView: 3,
        onInit: (swiper) => {

            this.swiper = swiper
        }

    };
    const GALLERY = this.props.gallerySlides.map((el, i) => {

        const IMAGES = el.PIC.map((img, i) => (


            {src: "http://gustae.рф" + img}


        ));


        return (
            <div key={i} className="gallery-slider">

                <span className="gallery-title">{el.NAME}</span>
                <Swiper {...PARAMS}>

                    {el.PIC.map((img, i) =>


                        <a key={i} href={img} onClick={(e) => this.openLightbox(e, i)}>


                            <img src={`http://gustae.рф${img}`} alt=""/>

                        </a>
                    )}


                </Swiper>

                <Lightbox

                    images={IMAGES}
                    isOpen={this.state.lightboxIsOpen}
                    onClickPrev={this.gotoPrevious}
                    onClickNext={this.gotoNext}
                    onClose={this.closeLightbox}
                    currentImage={this.state.currentImage}

                    onClickImage={this.handleClickImage}

                />
            </div>





        );


    });


    return (


        GALLERY
    );
}

render() {


    return (
        <div className="card-plan-gallery">

            <div className="hide-gallery ">


                {this.renderGallery()}


            </div>
            <div className="for-center-btn">
                <a href="javascript:void(0);" className="btn-more">
                    <div className="btn-more__icon"/>
                    <span>Планирови квартир</span>
                </a>
            </div>
        </div>

    );
}


}

export default ObjectGallery;

Answer:

There are no conditions to render <Lightbox /> and so you step through the this.props.gallerySlides array and render everything at once. Added an example where you need to add a condition.

Also you have a confusion with indices, the variable i declared several times. Changed to k .

import React, { Component } from "react";
import Swiper from "react-id-swiper";
import Lightbox from "react-images";

class ObjectGallery extends Component {
  constructor(props) {
    super(props);

    this.swiper = null;
    this.state = {
      currentImage: 0,
      lightboxIsOpen: false
    };
    this.closeLightbox = this.closeLightbox.bind(this);
    this.gotoNext = this.gotoNext.bind(this);
    this.gotoPrevious = this.gotoPrevious.bind(this);
    this.openLightbox = this.openLightbox.bind(this);
    this.handleClickImage = this.handleClickImage.bind(this);
    console.log(props);
  }

  openLightbox(e, i) {
    e.preventDefault();
    // arr[i] = true;
    this.setState({
      currentImage: i,
      lightboxIsOpen: true
    });
    console.log(i);
  }

  closeLightbox(e, i) {
    // arr[i] = false;
    this.setState({
      currentImage: 0,
      lightboxIsOpen: false
    });
    console.log(i);
  }

  gotoPrevious() {
    this.setState({
      currentImage: this.state.currentImage - 1
    });
  }

  gotoNext(e, i) {
    this.setState({
      currentImage: this.state.currentImage + 1
    });
    console.log(i);
  }

  handleClickImage() {
    if (this.state.currentImage === this.props.images.length - 1) return;

    this.gotoNext();
  }

  renderGallery() {
    const PARAMS = {
      spaceBetween: 30,
      slidesPerView: 3,
      onInit: swiper => {
        this.swiper = swiper;
      }
    };
    const GALLERY = this.props.gallerySlides.map((el, i) => {
      const IMAGES = el.PIC.map(img => ({
        src: "http://gustae.рф" + img
      }));

      return (
        <div key={i} className="gallery-slider">
          <span className="gallery-title">{el.NAME}</span>
          <Swiper {...PARAMS}>
            {el.PIC.map((img, k) => (
              <a key={k} href={img} onClick={e => this.openLightbox(e, k)}>
                <img src={`http://gustae.рф${img}`} alt="" />
              </a>
            ))}
          </Swiper>
          {
            this.state.currentImage === i &&
            <Lightbox
              images={IMAGES}
              isOpen={this.state.lightboxIsOpen}
              onClickPrev={this.gotoPrevious}
              onClickNext={this.gotoNext}
              onClose={this.closeLightbox}
              currentImage={this.state.currentImage}
              onClickImage={this.handleClickImage}
            />
          }
        </div>
      );
    });

    return GALLERY;
  }

  render() {
    return (
      <div className="card-plan-gallery">
        <div className="hide-gallery ">{this.renderGallery()}</div>
        <div className="for-center-btn">
          <a href="javascript:void(0);" className="btn-more">
            <div className="btn-more__icon" />
            <span>Планирови квартир</span>
          </a>
        </div>
      </div>
    );
  }
}

export default ObjectGallery;
Scroll to Top
AllEscort