Tagged: jpg, Product, WebP, woocommerce
-
AuthorPosts
-
November 12, 2020 at 2:37 pm #1260141
Hi there,
A click on a thumbnail on the woocommerce product page opens the actual image not in a lightbox but the actual file. Any idea how to fix this? It works fine in Browsers like Safari that don´t display webp. Not sure if that was introduced with the latest update? We are running 4.7.6.4.
Thanks!
ElNovember 13, 2020 at 11:45 pm #1260399Hey El,
I do not see the class for lightbox added, is the lightbox enabled in the Theme options?
Best regards,
VictoriaNovember 14, 2020 at 11:12 pm #1260523Hi Victoria,
sure – as mentioned. It works on safari so the code is there. It seems like webp is the actual issue with enfold and lightbox.
Best
ElmarNovember 14, 2020 at 11:14 pm #1260524Access it from mobile in case you only have webp supporting desktop browsers
November 16, 2020 at 10:54 am #1260658Here is the screenshot that also shows that lightbox is activated. It seems to be a webp issue.
November 19, 2020 at 4:27 am #1261439Hi,
Thank you for the update.
The default lightbox script in the theme does not support webp images by default, or it does not autolink images with webp format. This is the list of lightbox’s supported image, video and link formats.
autolinkElements: 'a.lightbox, a[rel^="prettyPhoto"], a[rel^="lightbox"], a[href$=jpg], a[href$=png], a[href$=gif], a[href$=jpeg], a[href*=".jpg?"], a[href*=".png?"], a[href*=".gif?"], a[href*=".jpeg?"], a[href$=".mov"] , a[href$=".swf"] , a:regex(href, .vimeo\.com/[0-9]) , a[href*="youtube.com/watch"] , a[href*="screenr.com"], a[href*="iframe=true"]',
Not really sure if this is going to work but we could try and add the webp format to the list above. Please edit the enfold\js\avia-snippet-lightbox.js file and look for the same code above around line 209, and replace it with:
autolinkElements: 'a.lightbox, a[href$=webp], a[rel^="prettyPhoto"], a[rel^="lightbox"], a[href$=jpg], a[href$=png], a[href$=gif], a[href$=jpeg], a[href*=".jpg?"], a[href*=".png?"], a[href*=".gif?"], a[href*=".jpeg?"], a[href$=".mov"] , a[href$=".swf"] , a:regex(href, .vimeo\.com/[0-9]) , a[href*="youtube.com/watch"] , a[href*="screenr.com"], a[href*="iframe=true"]',
We just added the webp format in the list so that script will be able to recognize images with the said format and apply a lightbox link to it automatically.
Best regards,
IsmaelNovember 19, 2020 at 10:36 am #1261490Ismael,
nice one. This did the trick:
https://www.dropbox.com/s/e9iavjfenrk69it/Bildschirmfoto%202020-11-19%20um%2009.34.37.jpg?dl=0
Can you put that into the next enfold release? That way I don´t have re-change the source code.
Best,
ElmarNovember 23, 2020 at 4:58 am #1262242 -
AuthorPosts
- You must be logged in to reply to this topic.