Feature: Closing lightbox on click outside of image about react-image-lightbox HOT 5 CLOSED

Thanks for the feedback! (And sorry I took so long to notice your comment - I think I've fixed my notifications now).

I'll see if I can get to this over the weekend.

from react-image-lightbox.

This feature is now available in 2.1.0 using clickOutsideToClose. Hope it helps!

from react-image-lightbox.

Great, just tested and already love it, thanks for implementing this so quickly :)

from react-image-lightbox.

I know this is an old issue but I'm trying to figure out how to add clickOutsideToClose to my code

import React from "react";
import Lightbox from "react-image-lightbox";
import { array, bool, func, number, object } from "prop-types";

const Gallery = props => {
  const images = props.galleryImages;
  const imagesIds = props.galleryImagesIds;
  const index = props.index;

  const GalleryComponent = props.open ? (
    <Lightbox
      reactModalStyle={{ overlay: { zIndex: 2000 } }}
      mainSrc={images[imagesIds[index]]}
      nextSrc={
        index + 1 === imagesIds.length ? (
          undefined
        ) : (
          images[imagesIds[(index + 1) % imagesIds.length]]
        )
      }
      prevSrc={
        index === 0 ? (
          undefined
        ) : (
          images[imagesIds[(index + imagesIds.length - 1) % imagesIds.length]]
        )
      }
      onCloseRequest={props.onClose}
      onMovePrevRequest={props.onPrev}
      onMoveNextRequest={props.onNext}
      imageTitle={props.titleImages[imagesIds[index]]}
      imagePadding={50}
    />
  ) : null;

  return GalleryComponent;
};

Gallery.defaultProps = {
  galleryImages: {}, // object of images, b/c we need to load asyn to get each image
  galleryImagesIds: [], // array of imagesIds, b/c we need to load asyn to get each image
  open: false,
  titleImages: {}, // object of images, b/c we need to load asyn to get each image
};

Gallery.propTypes = {
  galleryImages: object,
  galleryImagesIds: array,
  index: number.isRequired,
  onClose: func.isRequired,
  onNext: func.isRequired,
  onPrev: func.isRequired,
  open: bool,
  titleImages: object,
};

export default Gallery;

from react-image-lightbox.

I know this is an old issue but I'm trying to figure out how to add clickOutsideToClose to my code

import React from "react";
import Lightbox from "react-image-lightbox";
import { array, bool, func, number, object } from "prop-types";

const Gallery = props => {
  const images = props.galleryImages;
  const imagesIds = props.galleryImagesIds;
  const index = props.index;

  const GalleryComponent = props.open ? (
    <Lightbox
      reactModalStyle={{ overlay: { zIndex: 2000 } }}
      mainSrc={images[imagesIds[index]]}
      nextSrc={
        index + 1 === imagesIds.length ? (
          undefined
        ) : (
          images[imagesIds[(index + 1) % imagesIds.length]]
        )
      }
      prevSrc={
        index === 0 ? (
          undefined
        ) : (
          images[imagesIds[(index + imagesIds.length - 1) % imagesIds.length]]
        )
      }
      onCloseRequest={props.onClose}
      onMovePrevRequest={props.onPrev}
      onMoveNextRequest={props.onNext}
      imageTitle={props.titleImages[imagesIds[index]]}
      imagePadding={50}
    />
  ) : null;

  return GalleryComponent;
};

Gallery.defaultProps = {
  galleryImages: {}, // object of images, b/c we need to load asyn to get each image
  galleryImagesIds: [], // array of imagesIds, b/c we need to load asyn to get each image
  open: false,
  titleImages: {}, // object of images, b/c we need to load asyn to get each image
};

Gallery.propTypes = {
  galleryImages: object,
  galleryImagesIds: array,
  index: number.isRequired,
  onClose: func.isRequired,
  onNext: func.isRequired,
  onPrev: func.isRequired,
  open: bool,
  titleImages: object,
};

export default Gallery;

Hi,

I have implemented the same and in the documentation, it is given that default value of onClickOutsideToClose is true. it should work automatically. did you succeed in this?

from react-image-lightbox.