Comments (7)
Actually there is not a way to modify the styles at this time. The package uses radium for styling, which is pretty easy to mix custom styles into, so if you're not averse to making a pull request allowing for custom styles injected via props, I can guarantee I'll look at it asap.
For starters, if you wanted to change the z-axis of the modal element (though I'm considering eventually changing this part to the react-modal
component), you could add a style attribute to the <Portal>
tag here: https://github.com/fritz-c/react-image-lightbox/blob/master/src/ReactImageLightbox.js#L950
from react-image-lightbox.
Thanks,
I'd really like being able to contribute, I'll try if time allows in the next few weeks
anything I should know about building? I'm not so good with npm and build tools
I see you have a release
script
how would I run it?
just running gulp
in the node_modules/react-image-lightbox
directory?
thanks
from react-image-lightbox.
You'll want to fork the repository, clone it to a directory on your computer and work inside that.
I used the gulp tasks from https://github.com/JedWatson/react-component-gulp-tasks
So everything will be the same as in there, but I think the only command you'll need to know is gulp dev
(also mapped to npm start
), which starts up a local dev server, and you can see the effects of your changes on the sample page served up. All the build and publishing stuff I'll handle after merging a pull request.
from react-image-lightbox.
@thomasmery Were you able to get it working for you?
from react-image-lightbox.
Hi,
sadly I had no time to work on a proper solution and ended up modifying the zIndex in my css.
sorry I did not warn you
from react-image-lightbox.
No, that's perfectly fine. Sorry for not making it customizable enough. I'll let you know when I make a release that better enables user styles.
from react-image-lightbox.
As of release v3.1.0, the reactModalStyle
prop can be used to customize the z-index, etc., of the modal holding the lightbox. Thanks for making this suggestion.
from react-image-lightbox.
Related Issues (20)
- Click close button behave to be scroll to prev image
- Image cache issue on react image light
- usage of deprecated life cycle methods, getting warnings of the same HOT 4
- Library maintenance and improvements HOT 14
- Centering problem when page has a scrollbar
- Bad overlay..
- How can I put a link on the title just like the demo?
- Is Medium Zoom effect possible
- Doc improvement request for reactModalStyle
- Blinkin when pushing the button supposed to trigger the state set in onMoveNextRequest
- Animation Duration Is Blocking Prev/Next Button Clicks
- Missing "loader" in TypeScript Types
- Loading icon gets stuck in React 18 dev mode HOT 17
- Need custom component PR Merged
- Uncaught ReferenceError: global is not defined HOT 4
- Need thumbnail images on bottom of the screen
- Does it work with React 18? HOT 3
- Image not loading on launch when React.StrictMode is enabled. HOT 6
- Info: Proper typescript component React 18.2.0 and Gatsby With tailwind
- React 18 not supported. HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-image-lightbox.