Issue with Zooming on products

Solved
Highlighted
Tourist
9 0 0

Hello Everyone,

 

We had a developer design a zoom function for us where if you click on a product it opens a white popup with the product enlarged where you could zoom into it.

 

After making some changes to the sizing of products this feature broke and we are now trying to fix it but don't have a developer to help and are trying to do this ourselves.

 

The preview to the site is: https://www.giorgiopiola.com/?fts=0&preview_theme_id=80356933668

 

Any suggestions as to where I could even find the could to look into this?

 

To see the issue you would need to clock on any product click the featured image and then the zoom button.

 

Any advice would be appreciated.

 

 

0 Likes
Highlighted
Shopify Partner
13 3 5

This is an accepted solution.

Hi @Artur_GP 

 

The weight and height rules in the following CSS in the timber.scss.css file is causing an issue with the zoom functionality:

.product-single__photos a,
.product-single__photos img,
.product-single__thumbnails a,
.product-single__thumbnails img {
display:block;
margin:0 auto;
position:absolute;
top:0;
left:0;
right:0;
width:100% !important;
height:100% !important;
object-fit:contain !important
}

If you change width and height to match below then the zoom works correctly:

width:100%;
height:100%;

However, you need to be sure that the !important declaration is not needed in the other places that those CSS rules are used. I would suggest making the change below to remove the !important declaration only for one case. Note that I can't be 100% sure that this change will work in all situations as I don't have full access to the theme source code, so you will need to test that it works correctly in all cases.

.product-single__photos a,
.product-single__photos img,
.product-single__thumbnails a,
.product-single__thumbnails img {
display:block;
margin:0 auto;
position:absolute;
top:0;
left:0;
right:0;
object-fit:contain !important
}
.product-single__photos a,
.product-single__thumbnails a,
.product-single__thumbnails img {
width:100% !important;
height:100% !important;
}
.product-single__photos img {
width:100%;
height:100%;
}

 

https://karere.com - Web Development
Highlighted
Tourist
9 0 0

Thank you! @Toro_Hill ,

 

One last question. It seems that now when you actually zoom on the product and then go back to normal page view and scroll through the picture list the products images become huge for some reason and overflow their containers.

 

It does not happen on all images, but only on some and is best seen in the Art Print section if you click any of the Art prints except the first 4 (those are missing images)

 

I was told the code responsible for this behavior is this, but I don't understand what any of it means:

<style>
{% if image.aspect_ratio <= 1 %}
{% assign max_width = height | times: image.aspect_ratio %}
{% if image.height < height %}
{% assign max_height = image.height %}
{% assign max_width = image.width %}
{% else %}
{% assign max_height = height %}
{% endif %}
{% else %}
{% assign max_height = width | divided_by: image.aspect_ratio %}
{% if image.width < width %}
{% assign max_height = image.height %}
{% assign max_width = image.width %}
{% else %}
{% assign max_width = width %}
{% endif %}
{% endif %}

{% if small_style %}@media screen and (min-width: 591px) { {% endif %}
.{{ img_id_class }} {
max-width: {{ max_width }}px;
max-height: {{ max_height }}px;
}
[data-id="{{ wrapper_id }}"] {
max-width: {{ max_width }}px;
}
{% if small_style %} } {% endif %}

{% if small_style %}
{% if image.aspect_ratio <= 1 %}
{% unless template.name == 'product' %}
{% assign max_width = 295 | times: image.aspect_ratio %}
{% else %}
{% assign max_width = 590 | times: image.aspect_ratio %}
{% endunless %}
{% else %}
{% if image.width < 590 %}
{% assign max_width = image.width %}
{% else %}
{% assign max_width = 590 %}
{% endif %}
{% endif %}
@media screen and (max-width: 590px) {
.{{ img_id_class }} {
max-width: {{ max_width }}px;
}
[data-id="{{ wrapper_id }}"] {
max-width: {{ max_width }}px;
}
}
{% endif %}
</style>

 

 

Any advice would be greatly appreciated!

 

Thank you

 

0 Likes
Highlighted
Shopify Partner
13 3 5

Hi @Artur_GP 

Without access to modify and test the theme source code I can't be sure any of these changes will work, but you can try them and see how you get on.

 

From the code you have shown me and reviewing your current CSS it looks like you need to make the following changes:

  1. Modify timber.scss.css and remove the width:80% rule from the .product-single__photo-wrapper class.
  2. Modify the following section in the code you showed me to look like this (ie. add "| times: 0.8"):
{% if small_style %} @media screen and (min-width: 591px) { {% endif %}
.{{ img_id_class }} {
max-width: {{ max_width }}px;
max-height: {{ max_height }}px; } [data-id="{{ wrapper_id }}"] {
max-width: {{ max_width | times: 0.8 }}px; } {% if small_style %} } {% endif %}

 

https://karere.com - Web Development
0 Likes