2

I have code below to display images in Image.Group with size prop to be set to "small". In side the Image.Group, I used ModalImage which is imported from react-modal-image. It is supposed to display large size photo when the image is clicked. But the fact is that when the image is clicked, it still shows the same size image as before. I know the problem is from size="small", and ModalImage simply inherits the prop from Image.Group. In this case, how can I overwrite the size to large in case the image is clicked?

<Image.Group size="small">
  {photos &&
    photos.map(photo => (
      <LazyLoad key={photo.name} height={150}>
        <ModalImage
          small={photo.url}
          large={photo.url}
          alt={photo.name}
          hideDownload={true}
          hideZoom={true}
        />;
      </LazyLoad>
    ))}
</Image.Group>

Before being clicked:enter image description here After being clicked:enter image description here

damingzi
  • 676
  • 10
  • 28
  • 1
    Might be the actual size of image is this only. Can you provide the actual image and link for `ModalImage` library? – ravibagul91 Sep 29 '19 at 02:54
  • There you go: https://firebasestorage.googleapis.com/v0/b/freebies-df71a.appspot.com/o/rJvrYSQku3TrLWfNB673%2Fphotos%2Fimage.jpg?alt=media&token=fda54bde-9577-45f4-9631-9aa0ebf3da35 – damingzi Sep 29 '19 at 03:09
  • The image shown in post is horizontally displayed, try to rotate it to get the vertical image. – ravibagul91 Sep 29 '19 at 03:11
  • I tried. It doesn't help, still the small size – damingzi Sep 29 '19 at 03:14
  • What is `ModalImage`? Any external package? Or can you provide codepen for this? – ravibagul91 Sep 29 '19 at 03:14
  • The thing is if I removed size="small" in Image.Group, I can see the large image when clicking the image, but the image before being clicked is no longer a small-sized thumbnail, it is also big size. – damingzi Sep 29 '19 at 03:15
  • @ravibagul91ModalImage is from https://www.npmjs.com/package/react-modal-image. Sorry I don't know how to setup codepen :( – damingzi Sep 29 '19 at 04:35
  • I also don't know what is happening, I tried with simple image and it is working fine. I doubt it is due to `height={150}` on `Lazyload` component. Whta is it? Try to remove it and check if you are getting same result. – ravibagul91 Sep 29 '19 at 05:09
  • Hi damingzi, check my solution and let me know if that helps. – ravibagul91 Sep 29 '19 at 05:22

1 Answers1

4

I think the issue is due to height={150} on Lazyload component.

if you want to show your image thumbnail of size 150px, then you can add a class name on ModalImage and apply CSS to that class name.

<LazyLoad key={photo.name}>  //Remove height here
   <ModalImage
      small={photo.url}
      large={photo.url}
      alt={photo.name}
      hideDownload={true}
      hideZoom={true}
      className="modal-image"    //Add a class name here
   />;
</LazyLoad>

Apply CSS to modal-image class,

.modal-image{
  max-height: 150px !important;
}

Demo

ravibagul91
  • 20,072
  • 5
  • 36
  • 59
  • 2
    Thanks Ravi!. You give me a clue on using className. The real problem is in size="small". After removing size="small", and define a customized className for small image display, the problem is solved. Thanks again! – damingzi Sep 29 '19 at 05:25