Need Img Zoom Script -JS,JQ..- (Theme Cascade)

Tourist
11 0 0

Hi all , good morning, i need help. 
I am using the Cascade theme on my shop and noticed that it doesn't have an option to zoom in on product images https://guezal.myshopify.com/
¿any can helpme with a script JA JQ etc?..
3000 Thank all.
Pd: NO app, the client sayd: "plz i dont have more money.."

- the theme don't have "zoom img "editor.-

sds.jpg

0 Likes
Tourist
4 0 2

Hi,

 

I see you've got the image zoom working on Cascade theme. I'm trying to do the same with jQuery Zoom by Jack Moore but I can't figure out how to add the required code out of this

 

<div class=”image-container”>
  <img class=”image-zoom” src=”{{ featured_image | img_url: '480x480' }}” alt="{{ image.alt | escape }} data-zoom="{{ featured_image | img_url: '1024x1024', scale: 2 }}>
  <div class="image-details"></div>
</div>

 

to somewhere in product_top-section.liquid (if that's the right file). If you or anyone can help that would be really cool, thanks.

 

<div class="nine-twelfths md--up--one-whole md--up--mt2 md--up--flex--auto">
                  <div class="px2 md--up--px0">
                    <a href="{{ img_url }}" class="{% for variant in image.variants %}product-variant--{{ variant.id }} {% endfor %} block cursor--default md--up--pointer {{ active_class }} md--up--active-border--{{ section_color }}-text" data-product-single-thumbnail data-aspectratio="{{ 1 | divided_by: image.aspect_ratio | times: 100}}">
                    {% capture img_id %}FeatureImage-{{ image.id }}{% endcapture %}
                    {% capture wrapper_id %}FeatureImageWrapper-{{ image.id }}{% endcapture %}
                    <div id="{{ wrapper_id }}" class="resp-img-wrapper js overflow--hidden">
                      <div style="padding-top:{{ 1 | divided_by: ratio | times: 100}}%;">
                        <img id="{{ img_id }}"
                             class="resp-img lazyload {% if force_crop %}resp-img--autoheight{% endif %}"
                             src="{{ image | img_url: '300x' }}"
                             data-src="{{ img_url }}"
                             data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048, 4472]"
                             data-aspectratio="{{ ratio }}"
                             data-sizes="auto"
                             alt="{{ image.alt | escape }}">
                         <img id="{{ img_id }}"
                              class="resp-img-placeholder"
                              src="{{ product.featured_image | img_url: '1x1' }}"
                              width="1px"
                              height="1px"
                              alt="{{ product.featured_image.alt | escape }}">
                      </div>
                    </div>
                    <noscript>
                      <img src="{{ image.src | img_url: 'large' }}" alt="{{ image.alt | escape }}" class="product__image">
                    </noscript>
                    </a>
                  </div>
                </div>

              {% endfor %}
            </div>
            <div class="md--up--hide">
              <div class="spacer pt1"></div>
              <div class='mobile-flickity__button-container absolute bottom--0 right--0 pt1 pr2'>
                <button class="btn border--none bg--transparent btn--next color--{{ section_color }}-text hv--{{ section_color }}-accent font-size--sm">{% include 'icon-next' %}</button>
              </div>
            </div>
          </div>
        {% endif %}

        {% if featured_image != blank %}
          {% assign feature_image_class = 'sm--hide md--up--five-sixths' %}
          {% if product.images.size == 1 or feature_product == true %}
          {% assign feature_image_class = 'one-whole px2 md--up--px0 md--up--one-whole wd--seven-eighths' %}
          {% endif %}
          {% if feature_product %}
          <a href="{{ product.url }}">
          {% endif %}
          <div class="product__feature-image {{ feature_image_class }} {{ product_feature_image_grid }} inline-block">
            {% capture img_id %}ProductImage-{{ featured_image.id }}{% endcapture %}
            {% capture wrapper_id %}ProductImageWrapper-{{ featured_image.id }}{% endcapture %}
            {% assign img_url = featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
            <div id="{{ wrapper_id }}" class="resp-img-wrapper js">
              <div style="padding-top:{{ 1 | divided_by: featured_image.aspect_ratio | times: 100}}%;"  data-feature-product-wrapper>
                <img
                  id="ProductPhotoImg"
                  class="resp-img product-single__photo lazyload {{ img_id_class }}"
                  src="{{ featured_image | img_url: '300x300' }}"
                  data-src="{{ img_url }}"
                  data-widths="[180, 360, 590, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                  data-aspectratio="{{ featured_image.aspect_ratio }}"
                  data-sizes="auto"
                  data-image-id="{{ featured_image.id }}"
                  alt="{{ featured_image.alt | escape }}"
                  data-product-featured-image>
                <img id="{{ img_id }}"
                     class="resp-img-placeholder"
                     src="{{ product.featured_image | img_url: '1x1' }}"
                     width="{{ product.featured_image.width }}"
                     height="{{ product.featured_image.height }}"
                     alt="{{ product.featured_image.alt | escape }}">
              </div>

 

 

0 Likes