react-awesome-lightbox icon indicating copy to clipboard operation
react-awesome-lightbox copied to clipboard

Problem: Close button "X" is faded even after passing an onClose prop

Open usman64 opened this issue 5 years ago • 5 comments

lightbox-issue

Code: {isImageViewerOpen && ( <Lightbox images={images} startIndex={imageIndex} onClose={() => setIsImageViewerOpen(false)} /> )}

usman64 avatar Sep 28 '20 20:09 usman64

the close button doesn't have any disable state. Does it close the lightbox when clicked? or functionality is also affected?

theanam avatar Oct 02 '20 13:10 theanam

Hi Anam,

It does affect the functionality it's working perfectly fine, but the only issue here is that it is faded which in terms of UX gives the user an impression that the button is disabled. So, you could fix this it'll be great just need to tweak the CSS a bit.


Regards, Muhammad Usman Tariq Lahore University of Management Sciences (LUMS) BS Computer Science | 2020 https://www.linkedin.com/in/muhammad-usman-tariq-454579a4/ View LinkedIn Profilehttps://www.linkedin.com/in/muhammad-usman-tariq-454579a4/


From: Anam Ahmed [email protected] Sent: Friday, October 2, 2020 6:38 PM To: theanam/react-awesome-lightbox [email protected] Cc: Muhammad Usman Tariq [email protected]; Author [email protected] Subject: Re: [theanam/react-awesome-lightbox] Problem: Close button "X" is faded even after passing an onClose prop (#4)

the close button doesn't have any disable state. Does it close the lightbox when clicked? or functionality is also affected?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/theanam/react-awesome-lightbox/issues/4#issuecomment-702739248, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AJOYJ3IZWOFSSUIS3QL66IDSIXJV5ANCNFSM4R45QPKQ.

usman64 avatar Oct 02 '20 14:10 usman64

Correction: It does NOT affect the functionality.


Regards, Muhammad Usman Tariq Lahore University of Management Sciences (LUMS) BS Computer Science | 2020 https://www.linkedin.com/in/muhammad-usman-tariq-454579a4/ View LinkedIn Profilehttps://www.linkedin.com/in/muhammad-usman-tariq-454579a4/


From: Muhammad Usman Tariq [email protected] Sent: Friday, October 2, 2020 7:02 PM To: theanam/react-awesome-lightbox [email protected] Subject: Re: [theanam/react-awesome-lightbox] Problem: Close button "X" is faded even after passing an onClose prop (#4)

Hi Anam,

It does affect the functionality it's working perfectly fine, but the only issue here is that it is faded which in terms of UX gives the user an impression that the button is disabled. So, you could fix this it'll be great just need to tweak the CSS a bit.


Regards, Muhammad Usman Tariq Lahore University of Management Sciences (LUMS) BS Computer Science | 2020 https://www.linkedin.com/in/muhammad-usman-tariq-454579a4/ View LinkedIn Profilehttps://www.linkedin.com/in/muhammad-usman-tariq-454579a4/


From: Anam Ahmed [email protected] Sent: Friday, October 2, 2020 6:38 PM To: theanam/react-awesome-lightbox [email protected] Cc: Muhammad Usman Tariq [email protected]; Author [email protected] Subject: Re: [theanam/react-awesome-lightbox] Problem: Close button "X" is faded even after passing an onClose prop (#4)

the close button doesn't have any disable state. Does it close the lightbox when clicked? or functionality is also affected?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/theanam/react-awesome-lightbox/issues/4#issuecomment-702739248, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AJOYJ3IZWOFSSUIS3QL66IDSIXJV5ANCNFSM4R45QPKQ.

usman64 avatar Oct 02 '20 14:10 usman64

OnClose function triggers funtionality. In order to use Lightbox you should write something like that:

{ postDetail.image && <> <p> <img src={imageSrc} onClick={toggleLightbox} /> </p> { light && <Lightbox image={imageSrc} title="Image Title" onClose={toggleLightbox} /> } </> }

in toggleLightbox function you should toggle light state.

tlhbyrz avatar Jan 12 '21 14:01 tlhbyrz