How if the F-Balls do I Add Zoom to Vogue theme?

Highlighted
Tourist
5 0 1

I found this very confusing tutorial: https://www.shopify.com/partners/blog/jquery-image-zoom


the problem for me is, its not matching any of my code in the Vogue theme:
I linked all the css and java. (I see the styles, and I even added hello world popup in java just to see if it calls; and it dose) I just can figure out how to make the zoom ACTULY work... :-(

... help me Obi Wan; your my only hope...

 

 

/* VOGUE CODE - found in, product-gallery.liquid */
<div class="product-image">
{%
include 'rimg',
img: image,
size: '2048x2048',
attr: data_attr
lazy: true
%}
</div>

0 Likes
Shopify Partner
111 9 22
First, make sure you have jquery installed on your theme. If not, add this to the header.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js" defer=”defer”></script>
If you have it, don't add it twice. Next, add the jquery zoom plugin directly below the jquery itself.
<script type="text/javascript" src="{{ 'jquery.zoom.min.js' | asset_url }}" defer=”defer”>
Then, add the html. This is wherever you want the image to zoom. Index page? Product template page? Find the image, add the code. Replace the image src's and alts with the data that's in there already. Make sure to use correct src to pull the right image. 
<img class=”image-zoom” src=”{{ featured_image | img_url: '480x480' }}” alt="{{ image.alt | escape }} data-zoom="{{ featured_image | img_url: '1024x1024', scale: 2 }}>
Go to the bottom of theme.liquid, or if you have footer-scripts.liquid or similar, paste this in there.
<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>
Then, you could add css to make it look like the demo if you wanted: 
.zoom {
  display:inline-block;
  position: relative;
}
		
/* magnifying glass icon */
.zoom:after {
  content:'';
  display:block; 
  width:33px;
  height:33px; 
  position:absolute; 
  top:0;
  right:0;
  background:url({{ 'icon.png' | asset_url }});
}
That should be it! It should work. I would add that you don't use that tutorial, but download the whole package from the main site for this plugin instead. There, it will have the assets you need to get going. You could even open the file and get an idea of how it comes together before hand. Hope this helps! Let me know if you get stuck, or confused. 
I am a multi-disciplined web developer with years of experience working with several languages and frameworks.
0 Likes
Tourist
5 0 1

LOL, this is the same rubbish tutorial from the interwebs. I figured it out on my own. Turns out different themes handle javascript differently. Once you call the correct method for your theme, everything starts working. Thanks though! At least some one is out there. :-)

0 Likes
Shopify Partner
111 9 22

Basically, but tutorials can be confusing when you're trying to figure things out. The concept is always the same. All themes are different, and it's best to keep your js together wherever you can. That's great you got it working. Now you understand plugins, and can start really taking advantage of different ones. Take care man :) 

I am a multi-disciplined web developer with years of experience working with several languages and frameworks.
1 Like
Tourist
5 0 1

Thanks again bro! :)

You too!
1 Like
New Member
2 0 0

Hi Mike,

 

I'm actually trying to accomplish this right now with the Vogue theme and I'm having a little bit of trouble. Would you mind sharing your solution? Appreciation it in advance.

 

Best,

Gunner

Deveaux New York

0 Likes
Tourist
5 0 1

Hi Gunner,

Over all if you follow any other tutorials; the javascript needs to be called into the theme correctly.

I was loading it incorrectly... until I wasn't, lol

When I test javascript or jquery, I like using the alert function so I know its working.

Regarding the codes below, compare the original and my hacks... I'm not sure if every Vogue install is the same...

Make sure you backup your site before hand. :-)

Anyways bla bla bla....

 

 

 

<!--my original vogue code found in 'product-gallery.liquid'-->
{%comment%}
<div class="product-gallery">
  {% for image in product.images %}
    {% assign data_attr = image.id | prepend: 'data-image-id="' | append: '"' %}
    <div class="product-image">
      {%
        include 'rimg',
        img: image,
        size: '2048x2048',
        attr: data_attr
        lazy: true
       %}
    </div>
  {% else %}
    <div class="product-image product-image-none">
      <img src="{{ 'no-image.svg' | asset_url }}">
    </div>
  {% endfor %}
</div>
{%endcomment%}
<!--end my original vogue code -->




<!--mike's modified zoom scripts also inside the "product-gallery.liquid''-->
<!--[if (gt IE 9)|!(IE)]><!--><script src="{{ 'jquery.zoom.js' | asset_url }}" defer="defer">
</script><!--<![endif]-->


<div class="product-gallery " >
  {% for image in product.images %}
    {% assign data_attr = image.id | prepend: 'data-image-id="' | append: '"' %}

<!--add zoom and id ex1 to the div -->
  <div class="product-image zoom lazyload" id='ex1'> 
      {%
        include 'rimg',
        img: image,
        size: '2048x2048',
        attr: data_attr
        lazy: true
       %}
    </div>

  {% else %}
    <div class="product-image product-image-none">
      <img src="{{ 'no-image.svg' | asset_url }}" class="lazyload">
    </div>
  {% endfor %}
</div>
<!--end mike's modified zoom scripts -->
 
 
 
 
 
 
 
<!--make a new asset file ( in assets ) and call it ( jquery.zoom.js ) and copy past all that crap below into it, or find the original online: https://www.jacklmoore.com/zoom/-->
 
!function(o){var t={url:!1,callback:!1,target:!1,duration:120,on:"mouseover",touch:!0,onZoomIn:!1,onZoomOut:!1,magnify:1.3};o.zoom=function(t,n,e,i){var u,c,a,r,m,l,s,f=o(t),d=f.css("position"),h=o(n);return t.style.position=/(absolute|fixed)/.test(d)?d:"relative",t.style.overflow="hidden",e.style.width=e.style.height="",o(e).addClass("zoomImg").css({position:"absolute",top:0,left:0,opacity:0,width:e.width*i,height:e.height*i,border:"none",maxWidth:"none",maxHeight:"none"}).appendTo(t),{init:function(){c=f.outerWidth(),u=f.outerHeight(),n===t?(r=c,a=u):(r=h.outerWidth(),a=h.outerHeight()),m=(e.width-c)/r,l=(e.height-u)/a,s=h.offset()},move:function(o){var t=o.pageX-s.left,n=o.pageY-s.top;n=Math.max(Math.min(n,a),0),t=Math.max(Math.min(t,r),0),e.style.left=t*-m+"px",e.style.top=n*-l+"px"}}},o.fn.zoom=function(n){return this.each(function(){var e=o.extend({},t,n||{}),i=e.target&&o(e.target)[0]||this,u=this,c=o(u),a=document.createElement("img"),r=o(a),m="mousemove.zoom",l=!1,s=!1;if(!e.url){var f=u.querySelector("img");if(f&&(e.url=f.getAttribute("data-src")||f.currentSrc||f.src),!e.url)return}c.one("zoom.destroy",function(o,t){c.off(".zoom"),i.style.position=o,i.style.overflow=t,a.onload=null,r.remove()}.bind(this,i.style.position,i.style.overflow)),a.onload=function(){var t=o.zoom(i,u,a,e.magnify);function n(n){t.init(),t.move(n),r.stop().fadeTo(o.support.opacity?e.duration:0,1,!!o.isFunction(e.onZoomIn)&&e.onZoomIn.call(a))}function f(){r.stop().fadeTo(e.duration,0,!!o.isFunction(e.onZoomOut)&&e.onZoomOut.call(a))}"grab"===e.on?c.on("mousedown.zoom",function(e){1===e.which&&(o(document).one("mouseup.zoom",function(){f(),o(document).off(m,t.move)}),n(e),o(document).on(m,t.move),e.preventDefault())}):"click"===e.on?c.on("click.zoom",function(e){return l?void 0:(l=!0,n(e),o(document).on(m,t.move),o(document).one("click.zoom",function(){f(),l=!1,o(document).off(m,t.move)}),!1)}):"toggle"===e.on?c.on("click.zoom",function(o){l?f():n(o),l=!l}):"mouseover"===e.on&&(t.init(),c.on("mouseenter.zoom",n).on("mouseleave.zoom",f).on(m,t.move)),e.touch&&c.on("touchstart.zoom",function(o){o.preventDefault(),s?(s=!1,f()):(s=!0,n(o.originalEvent.touches[0]||o.originalEvent.changedTouches[0]))}).on("touchmove.zoom",function(o){o.preventDefault(),t.move(o.originalEvent.touches[0]||o.originalEvent.changedTouches[0])}).on("touchend.zoom",function(o){o.preventDefault(),s&&(s=!1,f())}),o.isFunction(e.callback)&&e.callback.call(a)},a.setAttribute("role","presentation"),a.alt="",a.src=e.url})},o.fn.zoom.defaults=t}(window.jQuery),$(document).ready(function(){$("#ex1").zoom()});
 
<!--end make a new ...-->
 
 
P.S. I think that's it, I know there's css stuff in my code above (lazyload) but I dont think it's dependant.... It doesn't exist in my site, but test and see your results.
0 Likes
New Member
2 0 0

Thanks so much man! Just got it to work. Only thing is that it only works on the feature image and not the rest. Do you know if there is any quick fix for this?

0 Likes
Tourist
5 0 1

Yes Gunner! Great News! :-)

 

Not sure about the rest of the image, but I assume if you wrap the div; <div class="product-image zoom lazyload" id='ex1'> </div>

around the OTHER images code, it should be the same idea.

 

e.g

Find the OTHER images area, wrap the code around it. (sorry for the cheesy example)

 

Not sure were the OTHER images are being call from, but the method should be the same.

When you do find the OTHER images, remember to put:

 

<!--[if (gt IE 9)|!(IE)]><!--><script src="{{ 'jquery.zoom.js' | asset_url }}" defer="defer">
</script><!--<![endif]-->

 

on that page too, so the javascript is executed.

 

Good Luck B!

 

P.S. feel free to reach out again, I'm not saying that's it. lol

0 Likes