FS#24212 : Zoom on click

Ticket #24212 - Zoom on click

Hi, in the product tab I need the product image to be enlarged by clicking on it. How can I do this? As in the “OLDSTYLE” preset. Can you help me?

Fred 26 Jan 2023, 19:31

Hi Michele
Go to Theme Settings → Product page and enable “Main Image Inner Zoom” option

Michele Fazi 27 Jan 2023, 14:23

Hi, I have no options on that page (screen)
My site: https://www.keryl.com/

Fred 27 Jan 2023, 15:18

Ok, I see. Please select Native layout and save, then you will see all options

Michele Fazi 27 Jan 2023, 16:03

And won’t I lose all the changes I’ve made?

Fred 27 Jan 2023, 21:14

just switch back to your settings after changing Main Image Inner Zoom

Michele Fazi 30 Jan 2023, 12:27

I did as you said, but from mobile the effect is not applied

Fred 30 Jan 2023, 17:00

Mobile zoom is disabled by default.
To enable it
- open the file /themes/alysum/assets/js/pages/product.js
- find the line

const disableMobileInnnerZoom = true;

and replace it with

const disableMobileInnnerZoom = false;

Michele Fazi 13 Feb 2023, 17:51

I can’t find the line you pointed out. Does it work with version 7.4? In case it does not work can you point me to how to do it in version 7.4?

Fred 13 Feb 2023, 17:52

Please update credentials in your profile https://support.promokit.eu/myprofile to access to your FTP Server I’ll try to do that for you

Michele Fazi 14 Feb 2023, 15:00

Account updated

Fred 14 Feb 2023, 18:21

1. I still can’t connect.
2. But as I can see zoom works fine on mobile → https://take.ms/Q7RBL

Michele Fazi 15 Feb 2023, 15:05

I would need that when you click on the image, it should be opened full screen, not zoomed in as it is now. The logins are correct, please try again.

Fred 15 Feb 2023, 16:33

That option is disabled for small screens because there is no enough space to show t hat popup.
If you want to enable it open the file

/public_html/themes/alysum/templates/catalog/_partials/product-cover-thumbnails.tpl

find the line

<div class="layer smooth05 hidden-sm-down" data-toggle="modal" data-target="#product-modal">

and remove “hidden” class like this

<div class="layer smooth05" data-toggle="modal" data-target="#product-modal">