I need help with using Zoom.js

Hello!

I’m trying to get zoom.js to work for a blog post page I’m building and I’m having some trouble!

I know that @cyberdave has this example created, but I’m having trouble with where the custom code should go and what it should look like as it seems to be in the project settings of his example project.

Currently I this code plugged into the page custom code section as you can see in my read only link.


and then I have data-attribute set to zoom on the rich text element.

What am I missing?

Read Only Link
https://preview.webflow.com/preview/royalty-blog?preview=95ec44bedf82b20ba16a3e75cb626f9c

Use absolute paths for your code assets (script and link).

This will give you broken links:

<script src="js/zoom.js"></script>
<script src="js/transition.js"></script>
<link href="css/zoom.css" rel="stylesheet">
What is the difference between an absolute and a relative URL?

Thank you! I got it working, but now it just shows up with a blank image when I click zoom. Any ideas on why that’s happening?

Great!

You remove the code. Again add live url

docs:

Vanilla JS version works for me :+1:

1 Like