Comments (2)
Thanks for reporting this issue.
from ngx-gallery.
This issue is caused by the following:
Whenever the last picture is selected, only the previous left image exists in the dom with a position of left -100%. Since it is left of the birds image (the city).
Whenever a person would click on the clouds image this would mean the clouds image now exists inside the dom with left: 0 and the image that was left of the birds (the city) is now on the right of the clouds image so it would be left: 100%.
Which means since it has a transition it would animate the left property of the city from -100% to 100%.
This is the reason why the image passes by.
To fix this issue you could do the following:
-
Turn off the transition when clicking on thumbnails so that there is no transition when using slides on thumbnails that are exactly 1 thumbnail further away.
(This would be a temporary solution to not use sliding for images further then 1 thumbnail away from the previous image) -
Or if you want to do it properly:
you could check whether the thumbnail that was clicked is either left or right of the currently viewed image (regardless of the amount of thumbnails inbetween.) I suppose you could check if the index is either bigger or smaller than the current index. Then set the left position of the clicked thumbnail image to -100% or 100% depending on whether it's right or left of the image that you were previously viewing, while disabling the transition on any images that are in-between the thumbnails and then transitioning to left: 0 for the clicked thumbnail. This would create an effect where whenever you click on the thumbnails that are further away from the previous image, it would slide into place. To make it look even better you could instead of abruptly removing the previous image that was shown on the other side of the thumbnails to also transition into the opposite direction before being removed. This would essentially create the desired effect for sliding.
Now for fading, this can be done in the same way. By first adding the images to the dom without transition and afterwards simultaniously fade out the image that is to be removed from the dom and fading in the image that it is supposed to fade to.
As soon as I find the time I'll try creating some exemplary code.
And while we're at it we could also replace left: -100% to transform:translateX(-100%). Like i've explained in this issue:
#22
from ngx-gallery.
Related Issues (20)
- Tif or Tiff image
- fileSource.split is not a function
- Fallback image
- Image Swipe is not working
- Updating to Angular 15 - Peer dependencies cannot resolve HOT 4
- The 'previewForceFullscreen' feature is experiencing issues on Safari.
- only upload small images HOT 1
- Tif Images are not displayed
- imageSwipe/thumbnailsSwipe not working HOT 1
- Angular12: Could not resolve dependency: tslib@"^1.9.3" HOT 1
- Vertical thumbnails on right HOT 3
- Material icons HOT 2
- change icon styles
- On video gallery, can not disable download button
- Angular 13 + V2: No Icons HOT 4
- Using ngx-gallery component in lazy module is not working in Angular 13 HOT 12
- ngx-gallery v2 with Angular13 [Image display problem] HOT 5
- How to use just lightbox feature?
- Image is not visible until mouse over or scroll to the backround area HOT 2
- Updating to Angular 14 - Peer dependencies cannot resolve HOT 5
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 ngx-gallery.