- This topic has 13 replies, 3 voices, and was last updated 4 months ago by
David.
-
AuthorPosts
-
September 21, 2020 at 5:05 am #1452049
Fredrik
Hello,
I’m using this code from David,
/* Vertical Scrolling Thumbnails */ .woocommerce div.product div.images .flex-control-thumbs li { padding: 5px 5px 0 0; -webkit-box-sizing: border-box; box-sizing: border-box; } .woocommerce-page div.product div.images { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-item-align: center; align-self: center; max-width: 450px; } .woocommerce div.product div.images .flex-control-thumbs { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 1; -ms-flex: 1 0 80px; flex: 1 0 80px; /* Adjust PX to suit width of thumbnails */ max-height: auto; /* Adjust Height to Image height on desktop */ overflow: auto; } .woocommerce div.product div.images .flex-control-thumbs li { width: 100%; padding: 0 10px 10px 0; } }
But I have an issue with toggling product gallery images on touch (mobile) using the thumbnails. Any reason why the thumbnails doesn’t respond well using touch? Sometimes it works & sometimes it doesn’t.
On desktop, click events for the thumbnails work, but it doesn’t translate well to mobile.
September 21, 2020 at 7:02 am #1452207David
StaffCustomer SupportHi there,
its probably the CSS flexbox that is interfering with the carousels behaviour. Best way to test is try it without that CSS – if it works correctly then we know thats the problem.
Fix – don’t apply it to Mobile by putting the CSS inside a desktop media query
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 21, 2020 at 9:21 am #1452573Fredrik
Hello David,
I tried without CSS, turned off all custom CSS on the site, only running default GP.
Still an issue I’m afraid.
On initial page load, it’s not working. Scroll down to the footer & back up, toggle touch starts working.
Reload page it stops working, scroll down & back up it starts working. Almost as if the lightbox is not loaded. This behavior is consistent on both Chrome & Safari on iOS.
So definitely not your code at least π
September 21, 2020 at 2:24 pm #1452962Tom
Lead DeveloperLead DeveloperHow do we see the issue exactly? Just loaded it on mobile and the carousel/lightbox seems to work fine without scrolling down and up.
Let us know π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentSeptember 22, 2020 at 2:14 am #1453463Fredrik
Hello,
Hmm strange one, still have the issue on iOS (latest version), both Chrome & Safari (latest versions).
Did you swipe between images or toggle between images using the thumbnails?
Swiping works for me, but not toggle. You would expect that you can toggle using touch the same way you can toggle between images on desktop using mouse click π
I also discovered the carousel/lightbox starts working when you press/touch somewhere on the description area. But reloading the page, not scrolling, or using touch anywhere else than on the thumbnails does not allow you to toggle between images.
I’ll try to get a video together that displays the touch events during a screen recording, but for now, you can see this video where I load the page & try pressing/use touch on the thumbnails to toggle between images, you can see there is a touch event registered but nothing happens:
September 22, 2020 at 3:52 am #1453579Fredrik
*Update.
When you interact with any “GP element” on the page the carousel/lightbox starts working.
See video:
September 22, 2020 at 9:47 am #1454158Tom
Lead DeveloperLead DeveloperDoes the same thing happen for you if you test one of our Site Library sites?: https://gpsites.co/merch/product/happy-ninja/
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentSeptember 22, 2020 at 9:59 am #1454171Fredrik
It works perfectly!
Funny, I killed all custom CSS, tried deactivating all plugins, made sure everything is up to date etc. Still same problem.
September 22, 2020 at 10:16 am #1454197Fredrik
I figured it out, I think.
I’ve set up two products in my shop, identical from each other, except one is a variable product.
A simple product works perfectly, like the Site Library site.
A variable product breaks the product gallery on iOS. This happens when you add a price to each variation. Before adding a price, the product gallery still works.
September 22, 2020 at 1:32 pm #1454438Tom
Lead DeveloperLead DeveloperStrange, does it continue to happen if you deactivate GPP and use TwentyTwenty? Trying to figure out if it’s our code or a bug in Woo.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentSeptember 22, 2020 at 2:48 pm #1454507Fredrik
Switching to TwentyTwenty comes with the same issues.
So at least not GP related by the looks of it π
Interestingly there is the small space around the thumbnail (the edges/frame) that allows toggle on a variable product for iOS. Almost as if the “toggle element” is misaligned or hiding, having a wrong z-index.
September 23, 2020 at 1:18 am #1454907David
StaffCustomer SupportI think this issue may be covered in this Pull Request:
https://github.com/woocommerce/woocommerce/pull/20002
Notable comments:
Listening for touch support works but requires interaction first.
and
Ensure images switch with the gallery controls
So the touch support listener first requires an interaction with the gallery.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 23, 2020 at 4:15 am #1455150Fredrik
Hello David,
Thx! Seems to be the same sort of issue or related to the zoom issue, surprisingly this was 2 years ago.
Iβll try to get in contact with someone at WooThemes. Hopefully they can provide a fix since itβs an essential feature in the product gallery.
September 23, 2020 at 4:54 am #1455193David
StaffCustomer SupportYeah definitely looks like a woo support query.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.