kolkov
commented
4 years ago Thanks for reporting this issue.
Closed brunoambr closed 4 years ago
kolkov
commented
4 years ago Thanks for reporting this issue.
Simbaclaws
commented
4 years ago 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: https://github.com/kolkov/ngx-gallery/issues/22
When a thumbnail is selected and another one is chosen (skipping exactly one previous image), the middle image (that was supposed to be "skipped") appears sliding (transitioning) in background.
This bug can be seen here: https://kolkov-ngx-gallery.stackblitz.io/
When we select the last image (the bird) and then choose the clouds image, the third image appears scrolling from left to right.
I am using Angular 9 (9.0.0-rc.7) and ngx-gallery v.1.0.9.
Issue #218 from the older repo states a similar problem! (https://github.com/lukasz-galka/ngx-gallery/issues/218), so I'm recreating it here!