How to display several galleries in the loop, I have already tried "350" plug-ins, none have solved my problem, maybe I am doing something wrong, but the point is, when I click on the image, my state changes and the lightbox opens, one should open , but everything opens, and it turns out that the last gallery overlaps all the others. How to solve this problem? I use 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;
  • After clicking in your openLightbox method openLightbox what openLightbox console give out? One value or all? - Raz Galstyan
  • @StackOverflow, all values - Ristek
  • Can you give the Lightbox code? Is it a separate library? or did you write it? - Raz Galstyan
  • @StackOverflow I dropped the library link - Ristek 5:43 pm

1 answer 1

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

You also have a confusion with the 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;