theanam / react-awesome-lightbox Goto Github PK
View Code? Open in Web Editor NEWLightbox for react with zoom, rotate and move feature with touch support ๐ก๐ฆ
Home Page: https://npm.im/react-awesome-lightbox
Lightbox for react with zoom, rotate and move feature with touch support ๐ก๐ฆ
Home Page: https://npm.im/react-awesome-lightbox
What's happening
opened lightbox, it fetches image x and display
then I press next it fetches image y and display
Everything is fine till this point
but when I go to the previous image (image x), it again fetches the image through the API call
Expected Behaviour
when we go back to the already visited image, it shouldn't fetch that image again
instead, it should support caching and get from cache or any better way so that don't have to wait for image to come from server over the api call again.
**caching can be done for some time limit
Steps to reproduce:
Update react to 18.
Use npm i react-awesome-lightbox
Expected:
Successfull installation
Actual:
peer react@"^16||^17" from [email protected]
Is there a way to explicitly open the light-box on an event, if so to include in docs.
Great code. Thank you for sharing. I'm working with React and have included the code successfully. The only issue is the gallery does not close when hitting the X. The other buttons work. Rotate, zoom as such. Just X won't work. Please advise.
npm v7+ wont allow package to be installed with react v17+ due to conflicting peer dependency.
Needs update.
Can you add the example code into the repository?
Thanks! ๐ฆ๐ฆ๐ฆ๐ฆ
hey i like this project! and maybe its my own misunderstanding but the example of usage just has the props of image and title being passed. do i need to pass anything else for the single image lightbox to have initial state as closed and a function to handle the closing of lightbox?
onNavigateImage functionality seems to be missing on the new build.
Could be related to https://github.com/theanam/react-awesome-lightbox/runs/3389418877
i'm using vite 3 ,
locally everything work fine but after build or in production
i'm facing this issue ,
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: [missing argument].[missing argument]
any suggestion to fix this issue
note : images is links from aws
**vite can't build pkg with default export
The image is selected (with an annoying blue tint) by pressing quickly on the next or previous image, as quickly as a double click. It does not happen in all browsers. For example it happens in Firefox, but not in Chrome. It can be fixed by adding the following to the img style:
userSelect: "none"
A wide image is cut off after 90 degree transform. Is it intentional to not have a scroll on the modal? (overflow:hidden)
Only means to see the entire image is to hit the zoom icon and then drag the image around
When I try to open any image it is stretched. I don't know why it is happening.
I am using version [email protected]
npm version: 8.19.3
reactjs version
Steps to reproduce:
I guess when you end dragging you have to reset initX, initY or lastX, lastY or both. I'm not sure about that.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.