Ndtyjky

So I'm setting up a Lightbox component with the react-images library and seem to have everything working. Except for one thing.

I have the thumbnails rendering but I can't create a proper onClick function. This is because I don't know how to get the index of the thumbnail I'm clicking on. If I had the thumbnail index, this wouldn't be a problem.

Here is my current Lightbox component config:

<Lightbox

  images={imageObjects}

  isOpen={openGallery}

  currentImage={middleImageIndex}

  showThumbnails={true}

  onClickThumbnail={this.onImageSelect.bind(this, index)}

  onClickPrev={this.onImageSelect.bind(this, middleImageIndex-1, length)}

  onClickNext={this.onImageSelect.bind(this, middleImageIndex+1, length)}

  onClose={this.onCloseGallery.bind(this)}

/>

How can I know the index of the thumbnail I'm clicking on so I can set it to currentImage?

Thanks!

Okay, I got it. The react-images docs don't tell your custom onClickThumbnail() function will be passed index by default.

So, you need to make a function that handles the index:

onImageSelect(newIndex){

  this.props.setMiddleImage(newIndex)

}

Then you simply add it to onClickThumbnail:

onClickThumbnail={this.onImageSelect.bind(this)}

Then it works.