I developed a simple React component which allow to click and open a full screen image with x/y axis movement. The component need only 2 urls. The first one is the pictures displayed in page, and the second one is the bigger picture that will be open to in fullscreen. So for example you can show a small 160x160 px image in page, and load only at click a 1600x1600 px image. You can also use a "dog" for small image and a "cat" for fullscreen image. Ratio of fullscreen image will be the same as original and component will calculate how much px user can scrool in x/y axis.
4 field are mandatory as props for this component:
- uri: the source of image displayed in you page
- uriHD: the high quality version of image
- hdWidth: the real width in px of uriHD image
- hdHeight: the real height in px of uriHD image
2 field are options:
- percBigger: How many zoom do you want full screen image? if set to 0 only one of the 2 axis will be blocked
- fadeInMillis: time for simple fade-in fade-out when user click to open/close full screen image
- debug: it draw a red line for fullscreen image
Please see an example at: https://1j86yy833.codesandbox.io/
Posted on Utopian.io - Rewarding Open Source Contributors
Thank you for the contribution. It has been approved.
You can contact us on Discord.
[utopian-moderator]
Hey @multivoltage I am @utopian-io. I have just upvoted you!
Achievements
Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!
Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x
Congratulations @multivoltage! You received a personal award!
Click here to view your Board of Honor
Congratulations @multivoltage! You received a personal award!
You can view your badges on your Steem Board and compare to others on the Steem Ranking
Vote for @Steemitboard as a witness to get one more award and increased upvotes!