I want to disable the animation effect when clicking / double-tapping an image in PhotoSwipe, how can I achieve this? I checked PhotoSwipe options but didn't find anything there. I also checked other questions here in StackOverflow but didn't find a similar question.
CodePen: https://codepen.io/dimsemenov/pen/gbadPv
On the browser developer console I noticed that the zooming uses transform: translate3d(...); - I believe this is what causes the animation
Related
When I double tap, I get this weird pill shaped mini display that shows what my finger touches (without maginifying it or anything). Scrolling does not work while it is displayed. What's the point of it, and can I disable it in my PWA application?
I can provide a partial answer to your question. This pill shaped view essentially shows the user what is under their finger / thumb. It aids in text selection (for copying certain parts of text), or cursor placement while editing text.
The other part about the question regarding whether you can disable it in your PWA, I am not sure, but essentially this is default webview behaviour. I hope someone can help you out with this, or maybe you’re able to figure this out.
I am dealing with a weird bug on Ionic's iOS native build where I sometimes cannot swipe back or switch tabs once I transition to a new page using router.navigateByURL(...), and trying to debug this issue has been troublesome since I can't "see" how the gestures are handled. Does anyone know where I should be looking in the code for handling transition gestures?
Here's a video demo of the problem: https://streamable.com/hk9c0
In the video, you can see me:
Swiping down to refresh using the ion-refresher element and you can see the page beneath (already entered a bug report for that part: https://github.com/ionic-team/ionic/issues/18284 )
Trying to tap the back arrow in the left corner
Attempting to swipe left to right to go back a page (hard to show that one)
Tapping the bottom tabs to transition to new tab, at one point, I tap on a tab that has an ion-fab element which appears in the bottom right because its z-index is higher than the "stuck" page.
Currently the best I've been able to do is by looking at the css classes that are added to the pages, but it's not much use....
Where app-release is the page you can see in the video and app-home is the page underneath the stack. It's my understanding that Ionic uses hammer.jsfor gestures, so I added it as a tag, please correct me if I am wrong. I cannot, for the life of me, recreate this bug consistently, but will often trigger 1 out of 50 tries.
I've been digging through the utils in Ionic Core to see where elements are being added and removed, with no luck.
I created a bug request for this here as well: https://github.com/ionic-team/ionic/issues/18305
Are you using #angular/animations to make the transitions between the pages? I had some issues like yours, as you can see in my question.
Router navigate on Ionic with animation blinking on ios using angular animations
If I am right about the use of #angualar/animations I suggest to use a custom animation of the Ionic itself, and not te angular's. You can see an working example here of its use here:
https://github.com/mhartington/ionic4-custom-animation
Since I have less tem 50 rep I cant comment so I had to post this anwser not knowing if it was really your case. Hope it helps.
If youre working with small slide you will notice they often stall halfways thru the slide. im using slide and not fade. Ive tested this on the basic flexslider example there is. It doenst matter if its a big og small slide if you slide the picture to 50% and you leave your finger from the slide, going straight down, then the image is stuck with 50% of to images.. Is this a bug or is there a solution? tested on ios 6 phone gap
edit it doenst have to be 50% you its everywhere u start sliding images and move the finger out of the slider then the sliding animation is stopped and youre stuck with something of two images.
Solution: Its currently a bug according to github A minor bug with no one to fix it anytime soon.. However i experienced severals flicker bugs when creating a slider on a transformed moved div...
therefor the solution for me was use iosslider instead. Its perfect! ive tried all sliders out there this one does it all with no bugs!!!.. Its free for personal use however not free for commercial :/ anyways its the best and there really isnt an alternative to what i need a slider for.
Say thank you with +1 if you went ahead and downloaded iosslider :) You will be satisfied i promise!
When on a webpage in the iOS5-browser and clicking a select-element, the browser zooms in on the select-element. Is it possible to get around this in any way?
As it turns out, this is one out of many issues with the zoom in iOS5. Basically, the suggested way to solve this issue is to remove ("user-") zooming from the web page completely. The down-side of this is that, obviously, the user then cannot zoom which definitely isn't a preferred way from an accessibility point of view.
I am writing a web-based application for Safari on the iPad and am looking for a jQuery-based solution for horizontal navigation. I've found several examples, but I want to create/use a horizontal carousel containing images hopefully stored in a <ul>. The selected image would be enlarged and in the middle of the carousel while the other images before and after the selected image would still be visible but smaller. A person could then swipe in either direction (no mouse click) to scroll left/right (or up/down through the <ul>).
I explored jQueryMobile and jQTouch and found many examples of using swipe but would like to avoid having to create this from scratch to address my requirements described above, if possible.
I've also found several good jQuery slider plugins like Swipe and Flexslider but I guess I'm being picky as I want to be able to preview the next images, as well as use something like the momentum property to scroll faster if a quick swipe.
I also found a similar topic posted on Stack Overflow.
Any help, pointers or advice is appreciated.