MagicToolbox - cant figure out why its not working! Need help!

Design help Custom code
1

Hello there Webflow Ninjas.

Im strugling with a custom code for a website im working on. Our CEO wants to have a image zoom function for our machine learning project, but i failed at every attempt. Miserably!
I have litttle to no experience with Java.

Our CEO want’s to have Image zoom so users can check the images in detail.
He sent me this site: Image Zoom Script – Installation Guide for Magic Zoom
from who we will buy this script.

I did the following:

  1. Download DEMO version and try to implement it.
  2. UnZIP the files.
  3. Upload to GitHub
  4. Tried to change the URL to RAW GIT (where i was greeted with 403 error - rawgit is closing down)
  5. Then tried to use jsDelivr to resolve this, but im not sure if i did it correctly. (i copied URLS from RAW GIT and i got back the jsDelivr links)
  6. Pasted code to Weblfow.
  7. edited classes and added customisaton code.
  8. Gave up on everything after MagicToolbox support wasnt really helpfull and said i should be able to follow instructions as they very simple.
    :frowning:

Can some PLEASE help me figure this out.

Here is the code i pasted to webflow:

image
image1087×178 10 KB

Here are the instruction for the MagicZoom:

Here is the link to my project:
https://preview.webflow.com/preview/microwork-staging2018?utm_source=microwork-staging2018&preview=7bd982e758550a4ec6dd7331b4d787a6
(search for “ANIMALS” page under “DATASET” folder)

If anyone can help me figure this out, i would be eternally gratefull!
Thank you :slight_smile:

2

You are probably using relative URLs for the scripts, so the site is attempting to search for it on Webflow, which is incorrect because you can’t host scripts on Webflow.

Screenshot_2018-10-19_091041
Screenshot_2018-10-19_091041828×199 14.4 KB

1 Like
3

Thank you samliew!!! You just solved my issues. I have remove one part of the script and added absolute URLs and now the script is working as intended.

THANK YOU! :slight_smile:

Update: i found a magnifier.js script on github and decided to go with this one soon after posting first post as i had problems with adding magiczoom to RAWGIT on github (github is closing down RAWGIT and isnt allowing new files to be uploaded) to even make calls from my site to rawgit.

Magnfier.js can be found here. GitHub - mark-rolich/Magnifier.js: Javascript library enabling magnifying glass effect on an images