Adding zoom on image hover in Brooklyn theme

dggb
Tourist
8 0 1

Hello, I tried following this: https://shopifypartnerblog.myshopify.com/blogs/blog/jquery-image-zoom?ref=minion-made

guide to add zoom on image hove functionality on my product page. I added the zoom.min.js file to my theme and I edited my media.liquid file to look like this:(code at end of file)

 

But now when I open my product page it's just a blank square, seems like the plugin is not working at all. Any idea what I did wrong? Thanks

{% comment %}
  Renders a media element for the product gallery.
  Media types include: image, video, external_video and model.
  Accepts:
  - media: {Object} Media Liquid object (required)
  - enable_image_zoom: {Boolean} Image zoom setting (required for media type image)
  - stacked: {Boolean} Layout type set as stacked (required)
  - featured: {Boolean} Media is set as featured (required)
  - height: {Number} Height to be passed to the image-style snippet
  - width: {Number} Width to be passed to the image-style snippet

  Usage:
  {%- for media in product.media -%}
    {% include 'media', media: media, enable_image_zoom: true, featured: true, stacked: true %}
  {%- endfor -%}
{% endcomment %}

{% capture media_id %}{{ section.id }}-{{ media.id }}{% endcapture %}
{% capture img_id_class %}product-single__media-{{ media_id }}{% endcapture %}
{% capture wrapper_id %}ProductMediaWrapper-{{ media_id }}{% endcapture %}
{% capture image_size %}{{ height }}x{{ height }}{% endcapture %}

<div id="{{ wrapper_id }}" class="product-single__media-wrapper {% unless stacked or featured %} hide{% endunless %}"
{% if media.media_type == 'video' or media.media_type == 'external_video' %} data-product-media-type-video data-enable-video-looping="{{ section.settings.enable_video_looping }}"{% endif %}
{% if media.media_type == 'model' %} data-product-media-type-model{% endif %}
{% if media.media_type == 'external_video' %} data-video-id="{{ media.external_id }}"{% endif %}
data-product-single-media-wrapper
data-media-id="{{ media_id }}"
tabindex="-1">
  {% case media.media_type %}
  {% when 'image' %}
    {% include 'image-style' with image: media, width: width, height: height, small_style: true, wrapper_id: wrapper_id, img_id_class: img_id_class %}
    <div class="product-single__media" style="padding-top:{{ 1 | divided_by: media.aspect_ratio | times: 100}}%;">
      {% assign img_url = media | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
        <div class="image-container">
          <img class="image-zoom" src="{{ media | img_url: '300x300' }}" alt="{{ media.alt | escape }} data-zoom="{{ media | img_url: '300x300', scale: 2 }}>
          <div class="image-details"></div>
        </div>
    </div>
  {% when 'external_video' %}
    <div class="product-single__media product-single__media--video" style="padding-top: {{ 1 | divided_by: media.aspect_ratio | times: 100 }}%;">
      {{ media | external_video_tag }}
    </div>
  {% when 'video' %}
    <div class="product-single__media product-single__media--video" style="padding-top: {{ 1 | divided_by: media.aspect_ratio | times: 100 }}%;">
      {{ media | video_tag: controls: false, class: 'media-video', image_size: image_size }}
    </div>
  {% when 'model' %}
    <div class="product-single__media" style="padding-top:100%;">
      {{ media | model_viewer_tag: image_size: image_size, reveal: 'interaction', toggleable: true, data-model-id: media.id}}
    </div>
  {% else %}
    <div class="product-single__media" style="padding-top: {{ 1 | divided_by: media.aspect_ratio | times: 100 }}%;">
      {{ media | media_tag: class: 'media-item', image_size: image_size }}
    </div>
  {% endcase %}
  <noscript>
    <img class="product-single__media" src="{{ media | img_url: 'master' }}"
      alt="{{ media.alt | escape }}">
  </noscript>
<script>
  $(document).ready(function(){
    $('.image-zoom')
    .wrap('<span style="display:inline-block"></span>')
    .css('display', 'block')
    .parent()
    .zoom({
      url: $(this).find('img').attr('data-zoom')
    });
  });
</script>
</div>

 

KetanKumar
Shopify Partner
15951 1754 5871

@dggb 

Sorry for facing this issue, it's my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
dggb
Tourist
8 0 1

Hello @KetanKumar ,

 

Here is a link to one of my products: https://mkgraphics.hr/products/edge-graphics-kit-all-bikes

 

Thanks for the reply.

0 Likes
SagarSukhanandi
Explorer
154 26 42

Hello @dggb 

<noscript> 
<img class="product-single__media" src="{{ media | img_url: 'master' }}" alt="{{ media.alt | escape }}"> 
</noscript>


Remove <noscript> </noscript> from your code and your image will be back 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on sagar.sukhanandi@gmail.com regarding any help
0 Likes
KetanKumar
Shopify Partner
15951 1754 5871

@dggb 

thanks for details 

can you please check your file code it's don't propr update your code make your step by step add zoom code 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
dggb
Tourist
8 0 1

Hello @SagarSukhanandi 

 

Thanks for the suggestion, when I removed the <noscript>  tags, the image was back, but the zoom functionality still doesn't work. I tried replacing the

<img class="product-single__media" src="{{ media | img_url: 'master' }}" alt="{{ media.alt | escape }}"> 

with:

        <div class="image-container">
          <img class="image-zoom" src="{{ media | img_url: '300x300' }}" alt="{{ media.alt | escape }} data-zoom="{{ media | img_url: '300x300', scale: 2 }}>
          <div class="image-details"></div>
        </div>

but that again removed the image from my product page..

0 Likes
dggb
Tourist
8 0 1

Hi @KetanKumar 

 

I'm sorry I don't know what exactly you mean. I followed the steps exactly one by one, but the linked article was talking about modifying the product.liquid code, but that's not where my product images code is, so I had to manually find the code where product image is.

0 Likes
SagarSukhanandi
Explorer
154 26 42

@dggb Change 

  $(document).ready(function(){
    $('.image-zoom')
    .wrap('<span style="display:inline-block"></span>')
   .css('display', 'block')
    .parent()
    .zoom({
      url: $(this).find('img').attr('data-zoom')
    });
  });

with 


  $(document).ready(function(){
    $('.image-zoom')
    .wrap('<span style="display:contents"></span>')
    .css('display', 'block')
    .parent()
    .zoom({
      url: $(this).find('img').attr('data-zoom')
    });
  });

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on sagar.sukhanandi@gmail.com regarding any help
dggb
Tourist
8 0 1

Hey @SagarSukhanandi,

 

This worked very well thank you very much! I am facing a problem now that the entire image gets show even though I only want the part where the mouse is to zoom in. If you look at the linked article there is a example of that exact behavior. Would you be able to help me with that too? But thank you very much!

 

If needed, here is my current code:

{% comment %}
  Renders a media element for the product gallery.
  Media types include: image, video, external_video and model.
  Accepts:
  - media: {Object} Media Liquid object (required)
  - enable_image_zoom: {Boolean} Image zoom setting (required for media type image)
  - stacked: {Boolean} Layout type set as stacked (required)
  - featured: {Boolean} Media is set as featured (required)
  - height: {Number} Height to be passed to the image-style snippet
  - width: {Number} Width to be passed to the image-style snippet

  Usage:
  {%- for media in product.media -%}
    {% include 'media', media: media, enable_image_zoom: true, featured: true, stacked: true %}
  {%- endfor -%}
{% endcomment %}

{% capture media_id %}{{ section.id }}-{{ media.id }}{% endcapture %}
{% capture img_id_class %}product-single__media-{{ media_id }}{% endcapture %}
{% capture wrapper_id %}ProductMediaWrapper-{{ media_id }}{% endcapture %}
{% capture image_size %}{{ height }}x{{ height }}{% endcapture %}

<div id="{{ wrapper_id }}" class="product-single__media-wrapper {% unless stacked or featured %} hide{% endunless %}"
{% if media.media_type == 'video' or media.media_type == 'external_video' %} data-product-media-type-video data-enable-video-looping="{{ section.settings.enable_video_looping }}"{% endif %}
{% if media.media_type == 'model' %} data-product-media-type-model{% endif %}
{% if media.media_type == 'external_video' %} data-video-id="{{ media.external_id }}"{% endif %}
data-product-single-media-wrapper
data-media-id="{{ media_id }}"
tabindex="-1">
  {% case media.media_type %}
  {% when 'image' %}
    {% include 'image-style' with image: media, width: width, height: height, small_style: true, wrapper_id: wrapper_id, img_id_class: img_id_class %}
    <div class="product-single__media" style="padding-top:{{ 1 | divided_by: media.aspect_ratio | times: 100}}%;">
      {% assign img_url = media | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
        <div class="image-container">
          <img class="image-zoom" src="{{ media | img_url: 'master' }}" alt="{{ media.alt | escape }} data-zoom="{{ media | img_url: 'master', scale: 2 }}>
          <div class="image-details"></div>
        </div>
    </div>
  {% when 'external_video' %}
    <div class="product-single__media product-single__media--video" style="padding-top: {{ 1 | divided_by: media.aspect_ratio | times: 100 }}%;">
      {{ media | external_video_tag }}
    </div>
  {% when 'video' %}
    <div class="product-single__media product-single__media--video" style="padding-top: {{ 1 | divided_by: media.aspect_ratio | times: 100 }}%;">
      {{ media | video_tag: controls: false, class: 'media-video', image_size: image_size }}
    </div>
  {% when 'model' %}
    <div class="product-single__media" style="padding-top:100%;">
      {{ media | model_viewer_tag: image_size: image_size, reveal: 'interaction', toggleable: true, data-model-id: media.id}}
    </div>
  {% else %}
    <div class="product-single__media" style="padding-top: {{ 1 | divided_by: media.aspect_ratio | times: 100 }}%;">
      {{ media | media_tag: class: 'media-item', image_size: image_size }}
    </div>
  {% endcase %}
  <noscript>
    <img class="product-single__media" src="{{ media | img_url: 'master' }}"
      alt="{{ media.alt | escape }}">
  </noscript>
  <script>
  $(document).ready(function(){
    $('.image-zoom')
    .wrap('<span style="display:contents"></span>')
    .css('display', 'block')
    .parent()
    .zoom({
      url: $(this).find('img').attr('data-zoom')
    });
  });
</script>
</div>
0 Likes
SagarSukhanandi
Explorer
154 26 42

@dggb Have you added styles mentioned on reference which you are using? 

style.PNG

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on sagar.sukhanandi@gmail.com regarding any help
0 Likes