Single product images displayed incorrectly

  • Resolved fabioga

    (@fabioga)


    3 years, 12 months ago

    Good evening everyone, for days I have been looking for an answer and I do tests but nothing!
    I just “finished” a wordpress ecommerce site (5.5.3) with woocommerce (4.7.1) and the EightStore Lite theme (1.2.4), below you can see the installed plugins.

    In the single product page I have 2 images, the main one (white background) and one in the gallery (brown background), then under the main image (opened) there are the two clickable thumbnails. Upon clicking on one of these, the large version is shown. In turn, if you pass on the image just opened, I will have the zoom of the detail correctly. In short, the classic system.

    The problem is that, apparently with random frequency but very frequently, the second image (therefore not the main one), when selected (click on the thumbnail) is shown completely without detail, as if a very small version of the image were loaded and “stretched ” to cover a larger area.
    If in this situation I step on the large image (the undefined one), the zoom works and I see sharp details but as soon as I leave the image area, it becomes degraded again.
    Finally, if I click on the magnifying glass at the top right, the image is opened correctly in full screen.

    Sometimes, the same problem occurs directly when opening the page also for the main image (white background). Normally with one or more page “hard refresh” [ctrl + F5], the images appear right.

    I am puzzled by the fact that it seems to happen without logic, initially only noticed on smartphones, now I have realized that it also happens on desktop.

    Anyone have any idea how to help me? What should I go to change? I get by with html, css and I understand a bit of js but this time I’m in trouble. Could it be a cache problem? But I tried to clean both the browser one and the one with autoptimize and switch browsers to one that had never opened the page… and nothing.

    Thanks a lot to anyone who wants to help me!
    – Fabio

    Screenshot of the problem:
    https://www.bassottocreativo.it/problema-img-prodotto/example-problema.jpg
    Plugin List:
    https://www.bassottocreativo.it/problema-img-prodotto/Lista-plugin-attivi.pdf

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)

  • Does the problem also occur when you disable lazyload in Autoptimize?

    I’m seeing Uncaught TypeError: $.browser is undefined wp-content/themes/eightstore-lite/js/jquery.fancybox-1.3.4.js on the browser console, which if I’m not mistaking is due to jQuery Migrate not being loaded in WordPress 5.5 any more. Maybe try to install the jQuery Migrate Helper plugin to see if that makes the error go away and allow the the them’s fancybox image display to work?

    • This reply was modified 3 years, 12 months ago by Optimizing Matters. Reason: not to do with lazyload
    Thread Starter fabioga

    (@fabioga)

    Thanks. I tried to install jQuery Migrate and browse various pages, here is the result:
    https://www.bassottocreativo.it/problema-img-prodotto/jquery_warning.jpg
    I have no idea how to intervene.
    I understood that the version of fancybox 1.3.4 is too old but not so if and how to update it.
    I have tried to install an alternative to Fancybox (by plugin), but either it is not the problem or it is not going to “overwrite” the use of Fancybox.
    Do you have any considerations or advice?
    Thanks a lot.

    Well
    1. the warning you see should be acted upon by the theme developer
    2. the JavaScript errors I mentioned are now gone, which is good
    3. the problem with the low resolution images remain (also when Autoptimize is disabled) though

    I would advice you to contact the theme developer maybe for (3) as well?

    Thread Starter fabioga

    (@fabioga)

    Ok, thanks, I wrote to him. I also thought about trying to implement the updated version of fancybox as indicated here:
    https://www.nerd-quickies.net/2015/09/23/upgrade-fancybox-to-version-2-fancybox2/
    Obviously saving the original code for a possible recovery.

    Thank you for all.

    Thread Starter fabioga

    (@fabioga)

    Solved. It was a poorly explained setting of the theme. Thank you very much.

    you’re welcome ??

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Single product images displayed incorrectly’ is closed to new replies.