Need help integrating Zoomooz into Webflow site

I was trying to do zoom effect, and I found this - can someone tell me how I can put this code in my weflow?
http://jaukia.github.io/zoomooz/

specifically this portion

Link to my weflow. I want to be able to zoom into each table. Will appreciate your help.

If you know please reply!! thank you

https://preview.webflow.com/preview/table-desk-setup?preview=2727050cd707bc0cb608b8a3b679f8ad


Here is my public share link: LINK
(how to access public share link)

Hi @ananya, Can you please update your post with some more info? Things like screenshots and examples of your desired design allow everyone to help you faster.

@thewonglv

I just did William - do you see it?

Sorry forgot to send the link earlier.

Hi @ananya, thanks! You can add your code in the dashboard: http://help.webflow.com/faq/how-to-add-custom-head-and-body-code-to-a-webflow-site

Hope this helps! :slight_smile:

@thewonglv did add it to the head in the custom code - however it is not working. This is first time I am trying to do this - do I need to add anything else to it?

Basically there are 12 columns with a hover and when each column is clicked it zooms in.

Does that make sense? Do I need to add a special div for the zoom to work?

I see what you mean now, if you’ve added the code to your site - you’ll need to follow the plugin’s documentation to make it work.

A quick glance at their docs says to add 'zoomTarget" as the class name:

Can you try this and let me know if that helps?

More info on adding classes: Webflow 101 | Webflow University

Thanks for working with me on this - stupid question - where do I add the zoomtarget? in webflow?

Do I add it in the custom code? in the body section?

I exported the code and will it look like this?

that did not make it do anything? Is it because right now the hover is also on - so it does not know where to click?

Yeah, try adding the class in Webflow and see if that works: http://help.webflow.com/lesson/using-classes-and-adding-styles

@thewonglv

I had already named it with zoomTarget.

https://preview.webflow.com/preview/destoptest2?preview=16ccae835558f9bf27d1b239b847f933

Created a new one - with no hover or anything just a square so now shows:

But not working - can you see ?

@thewonglv

Hi william - do you see anything I could do ? to get the zoom to work?

sorry to bother you

It looks like your custom code is trying to pull a JS file but that file isn’t hosted anywhere.

Try downloading that JS file, then uploading it to a cloud file storage like dropbox. Then calling it in in that line 2 code.

Also, it looks like you didn’t add the Custom Attributes that the script needs

data-targetsize=“0.45” data-duration=“600”

Add the data attributes too.

​Try these steps and let me know if you’re successful. I’ll be standing by for your response! :slight_smile:

Cheers,
Nelson

1 Like

@PixelGeek

Thank you - working on it!

There are 2 .js files - should I put them both in drop box and drop them there ?

Also - I will need to name the table2-zoomtarget correct? though it says it should be table2 zoomTarget - is that fine ?

Thank you for your help!!!

How do I add the custom attributes?

Name: what will be this?
Value: I add the "data-targetsize=“0.45” data-duration=“600"”

@PixelGeek

I did this, added both the files to dropbox added them as per below:

Added the custom code:

And changed the name for the table 2:

It did not work? Do you think it might because there is a hover state there?
Thanks - sorry about multiple messages

Final webflow file:
https://preview.webflow.com/preview/table-desk-setup?preview=2727050cd707bc0cb608b8a3b679f8ad

Sorry to weigh in in a not completely helpful way but I’ve been playing with this because it would be cool to figure out!

A couple of things:

  • You need to add the custom code like this:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    

I thought you wouldn’t need the jquery one because it’s included in webflow - but it seems you do…

  • You also need to make sure that the class is just ‘zoomTarget’ - at the moment it is ‘table2 zoomTarget’ and I don’t think that will work

  • Even then it (sorry) still won’t work because it seems it needs to be read as ‘zoomTarget’ and somehow webflow is actually converting it to ‘zoomtarget’ (removing the casing) - I found this out by exporting the code and editing the class back to zoomTarget, whereupon it began to SORT OF work.

  • By SORT OF work I mean that it still didn’t behave in the lovely flowy way it does in the demo. It somehow removed the size constraints I set on the div, and then just did a weird zoom in/out that wasn’t very nice.

I might keep investigating this tomorrow but I’m really just messing around as I don’t understand it fully - In conclusion whatever the deal it’s clearly more complicated than it initially seems, and it doesn’t work fully as is with Webflow because of the case altering…

@joshuafry

Thanks for your try Joshua.

with that you could only have it zoom once? while there are multiple tables that need to be zoomed - I mean I could export the code and change the target to be capital - but don’t think that will work also?

@joshuafry
do you know another way to create the zoom effect in webflow?

Thanks!

Hopefully @PixelGeek can add something to this :smile:

If you can get around the other issues I’m having you would be able to have multiple ones you just need to add the classes independently, so you have a class called ‘zoomTarget’ and separately add ‘table2’ - the problem is you had one class with both words.

I’ve not used these any of these but there are various jquery zoom plugins here, it really depends what you’re trying to achieve. The Zoomooz one is awesome though… I’ll let you know if I get it working better.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.