Comments (7)
@nilaybrahmbhatt yes you can put the rotate icon in Lightbox to rotate the current image, i am using light box for my current project and we achieve the rotate feature, try this:
const BillAction = [
<i className="material-icons" onClick={this._rotateImage.bind(this, 'right')}>rotate_left</i>,
<i className="material-icons" onClick={this._rotateImage.bind(this, 'left')}>rotate_right</i>,
];
use this property of LightBox: toolbarButtons={BillAction}
Define this function to rotate the image:
_rotateImage(type){
if(type == 'left'){
let angle = (this.state.rotationAngle + 90) % 360;
this.setState({rotationAngle : angle});
document.getElementsByClassName('image-current')[0].style.transform = rotate(${angle}deg);
}else{
let angle = (this.state.rotationAngle + 360 - 90) % 360;
this.setState({rotationAngle : angle});
document.getElementsByClassName('image-current')[0].style.transform = rotate(${angle}deg);
}
}
from react-image-lightbox.
I'm not sure. The library relies on the height / width of the original image, so it would be difficult to change it using just css. What do you want to rotate the images for?
from react-image-lightbox.
i want rotate left and right button same as zoom.
that rotate image appropriately left and right
from react-image-lightbox.
I don't have support for this in this library, but you're welcome to add it.
The width and height of the original image are referenced from here:
https://github.com/fritz-c/react-image-lightbox/blob/da13c43d110df1d2775177c35fb14f3a5b66b2cc/src/react-image-lightbox.js#L373-L379
You'd have to instead use your rotation information to determine the actual height and width after rotation.
And you'd have to add the necessary style info to the img tags here:
https://github.com/fritz-c/react-image-lightbox/blob/da13c43d110df1d2775177c35fb14f3a5b66b2cc/src/react-image-lightbox.js#L1317-L1346
from react-image-lightbox.
Cannot read property 'style' of undefined
document.getElementsByClassName('image-current')[0].style.transform = rotate(${angle}deg)
;
from react-image-lightbox.
zoom and rotate are together; when you rotate this image, and then zoom it, it will go back to the original angle? Are you encounter this problem ?
from react-image-lightbox.
After zoom when you rotate this image it will go back to the original angle in react lightbox.Is there any way to solve this.I am using react-image-lightbox;
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.