How to Implement Jack Moore's Jquery Zoom

Design help Custom code
1

I’ve been wracking my brain for hours trying to figure out this offensively simple task, but I just can’t for the life of my implement this Jquery zoom solution in webflow. @Waldo, if you can see this, it seems like you knew the answer but the thread closed.

http://www.jacklmoore.com/zoom/

image
image731×208 12.3 KB

I tried every possible combination of code mixing that I could think of, but my attempts were shots in the dark at best so they aren’t any help to show.

(the old thread)
https://discourse.webflow.com/t/mouseover-to-zoom-view/13995/2

Thanks to anyone that can help.

2

Great question @wellwhy. I made a quick cloneable project for you to work with here: Hover to Zoom image - Webflow

Basically you need to do the follow for each image:

  1. Copy the custom code from the before closing </body> tag, and the CSS for the before closing </head> tag and add that to your site.
  2. Add a div block with a class name of zoom set it to relative position and overflow: hidden for the style
  3. Then add an img inside of that block and give it a class name of zoomImg
  4. Add an ID to the zoom element holding your image of say ex1
  5. Update the code between the script tags to include your ID like this:
<script>
 $(document).ready(function(){
    	$('#ex1').zoom();
        $('#ex2').zoom();
    	});
</script>

So each time you want to add a new “zoom” block, just copy the previous “zoom” block, swap out the image and give the “zoom” element an ID.

So if you give the zoom element an ID of say monkey you would add the following code in sequence:

<script>
 $(document).ready(function(){
    	$('#ex1').zoom();
        $('#ex2').zoom();
        $('#monkey').zoom();
    	});
</script>
2 Likes
3

Thanks for raising this @wellwhy and for the instructions @Waldo

Perfect timing - i’m building a store that sells fabrics - needing close-ups? Absolutely :grin:

1 Like
4

Thanks for the quick reply, this implementation worked! I must have had trouble adding the script through a link rather than local text.

I have an issue though:

Extremely inconsistently, the “zoom” will not zoom at all, and will just show the image at the same size that it was before, but still moves vertically with mouse movement.

Other times, it will work correctly and scale to the exact resolution of the image and move around. I can’t tell what causes it, whether it’s browser, incognito mode, or when I publish after changing seemingly unrelated things like the url of a link.

I can see that sometimes the page loads only the image sized down (500x500 for example), and when it works, the image is 1000x1000.

I literally DUPLICATE my project, and it works on one, doesn’t on the other, but then I open the working one in an incognito window, and it breaks again.

https://preview.webflow.com/preview/wellwhy?preview=214c6c1ff38ca237028244aca7bde500

wellwhy.webflow.io

UPDATE: Jack Moore’s zoom seems to just do weird things, and it isn’t very versatile either. I decided to implement EasyZoom instead, which I got working.

http://zoom-6924dd.webflow.io/

5

Hi Waldo,

Thank you very much for this post. I’ve managed to implement this solution and it works fine. I was wondering if there is a way to disable this for touch/mobile devices as it seems to cause some issues with scrolling. The one work-around I’ve thought of is duplicating the images, giving them a different class and then only showing on mobile. But looking for a more simple, elegant solution if there is.

6

You can do something like this:

<script>
$(document).ready(function(){

  if($(document).width() < 768) return; // <-- stop script for devices below 768

  $('#ex1').zoom();
  $('#ex2').zoom();
});
</script>
7

Thank you very much Sam. I’ll implement this later today.

8

Hi folks,

I’ve implemented this, but I can’t get it to work with variants. When choosing a different variant and zooming, it will zoom the main variant image.

@samliew Any thoughts on this?

Also, considering this thread is 2+ years old, is there a better zoom alternative out there I should be using?

Best,
Øystein