Comments (15)
Resolved in v1 #199
from react-images.
First of all thanks for this nice library. I saw that you removed support for swiping in the source code. I reimplemented swiping and didn't see any errors or warnings. So my question: Is there still any problem with swipe support or could we reimplement it?
from react-images.
I'll confess that I'm a bit of a perfectionist. I wasn't happy with the previous implementation which recognised a swipe left/right interaction and just updated the image index.
I'd like to load the image on either side of the current index and implement properly with a smooth transition.
from react-images.
Ah ok, I can understand that. Perhaps I'll find some time this week to write something down, if that's welcome.
from react-images.
That would be great, looking forward to it :)
from react-images.
Ok, this turned out to be more complicated than I thought.
First I tried to use react-swipeable-views, but then I need to add all images before swiping. So all images will be loaded at the same time, which of course slows down loading of the visible image on slow connection and is problematic when there are a lot of images.
Then I tried to use react-swipeable. I pushed a branch to my fork. You can check it out here. It's not working properly, but perhaps showing a way how to handle swiping without loading all images. When a swipe is occurring, an image is added to the left or right of the current image and left margin is adjusted with animation. I needed to create a container around the images and corresponding footers and position the container absolutely. This brings a problem with the positioning of the close icon. Also swiping is only working properly when you wait for the animation to finish completely. Another swipe before that currently doesn't work, but that shouldn't be a problem to fix. On mobile I also see a flickering when the current image is updated, but perhaps using an array of images instead of left/right and main images could solve that problem.
Have a look and tell me what you think about it. The implementation is not too pretty for now, but I didn't want to spend more time on it for now, if you maybe don't like it anyway ;-)
from react-images.
To avoid the flickering you should add a key with the image index on the img's parent div.
imageLeft ?
<div key={currentImage-1}
className={css(classes.imageContainer)}
style={{ marginLeft: -window.innerWidth + deltaX }}
>
<img ... />
<Footer ... />
</div>
etc.
This way React will keep the same DOM elements for the same image src.
from react-images.
You can find a reimplementation of swipe support here. It's working pretty fine on my devices. What I did:
I wrapped all images in a container with width of window.innerWidth * numImages
. Different images are shown by setting transform: translateX(deltaX)
. deltaX
is recalculated on change of currentImage and during swiping, so we automatically get animations on clicking arrows or setting new currentImage in props, too.
Currently only images that are visible or next to the visible image are assigned a src attribute. Other images will not load until they pass a certain threshold (compare here)
There are still some performance issues (especially on real mobile devices), but I don't know if and how to fix them right now. One is caused by the size of the images in the example. Swiping is not really fluent sometimes. If you use images with smaller sizes (100px for example) the performance is much better. This seems of course reasonable...
Another problem is caused by setting and unsetting image src, especially when the images are not already in the cache.
Finally I think there might be some clean up necessary. But have a look yourself and let me know what you think
from react-images.
That's really cool @jkettmann!
There's a ways to go, but we're on the right track :)
from react-images.
Thanks. Tell me if I should create a pull request or how to continue
from react-images.
I'd like to take what you've done and merge it into a feature/swipe-support
branch, rather than master. Is that possible?
from react-images.
Yes of course. Will you create that branch or did you mean feature/touch-swipe
from react-images.
Some time has passed now. Guess you have been busy. Just wanted to know if there is any news on this topic. I'm using my branch in production since more than a month now and don't know about any problems yet.
from react-images.
I'm very very enthusiastic about this feature. I hope you will have time to implement it
from react-images.
@jkettmann let's get this moving again. Please create a PR against feature/swipe-support
from your branch swipe_with_transition
.
from react-images.
Related Issues (20)
- showNavigationOnTouchDevice is not part of the type for CarouselProps HOT 2
- Style Autoprefixer broken for `display: flex`
- TypeError: undefined is not an object (evaluating 'currentView.caption') HOT 1
- Option to always show header and footer. HOT 1
- Warning using ModalGateway in react's Strict Mode HOT 2
- Is there a way to disable some/all the shortcuts ? HOT 1
- Component Customization with Styled-Components Library HOT 5
- Picture title HOT 4
- NPM Audit Security report HOT 3
- 想添加一个查看预览图时,可旋转的功能
- React 17 support HOT 6
- FATAL: 1.1.7 to 1.2.0-beta.6 breaks fullscreen mode ('active' of undefined) HOT 7
- is there a way we can disable scrolling for the carousel
- Demo error HOT 4
- In search of a replacement ❓ HOT 2
- Can I get the images data from a json file and how? Thanks HOT 1
- Can you add an option for adding hyperlink(s) under the photo? HOT 1
- A vulnerability introduced in react-images HOT 2
- Can it view .tif or .tiff type image ? HOT 1
- Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes'. HOT 1
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-images.