Magic Zoom™ demo
This demo shows you how to use Magic Zoom™ on Weebly websites.
Hover on the image for a gorgeous zoom:
Hover on the image for a gorgeous zoom:
Instructions
To remove the red text "Please upgrade to full version of Magic Zoom™" message, buy a license for Magic Zoom™, then upload your licensed magiczoom.js file (overwriting the demo magiczoom.js file).
Useful tips:
If you need help, please contact us here: www.magictoolbox.com/contact/
- Download the free trial of Magic Zoom™ (zip) and unzip it.
- Login to Weebly, go to your Design tab, select your theme and click Edit HTML/CSS.
- Click Add new files and upload these 4 files from the magiczoom folder:
hint.gif
loader.gif
magiczoom.css
magiczoom.js - Click Add new files again and now upload the images you wish to zoom. In this demo, we have uploaded this small image and this large image.
- Go to the Pages tab, click the page where you want to add Magic Zoom™, then click Edit Page.
- Drag the Custom HTML element into your page and paste this code:
<a href="files/theme/YOUR-BIG-IMAGE.jpg" class="MagicZoom"><img src="files/theme/YOUR-SMALL-IMAGE.jpg"/></a>
(replacing YOUR-BIG-IMAGE and YOUR-SMALL-IMAGE with the names of the images that you uploaded). - Go to the Pages tab, click Advanced Settings and in the Header code field, paste this code:
<link rel="stylesheet" href="files/theme/magiczoom.css"/>
<script src="files/theme/magiczoom.js"></script> - Click Save Settings.
- Magic Zoom™ should now be working!
- Last thing... to make the hint.gif and loader.gif images show up, go to the Design tab, click Edit HTML/CSS and click the main-styles.css page. Insert the following code at the end:
.MagicZoomHint {
background: url(hint.gif) no-repeat 2px 50%;
}
.MagicZoomLoading {
background: #fff url(loader.gif) no-repeat 2px 50%;
} - Enjoy!
To remove the red text "Please upgrade to full version of Magic Zoom™" message, buy a license for Magic Zoom™, then upload your licensed magiczoom.js file (overwriting the demo magiczoom.js file).
Useful tips:
- Repeat Steps 6 & 7 for each page where you want to add Magic Zoom™.
- Images won't show while you are creating your zoom - to see them you must Publish your page to see the live site.
- Once installed, you can change the size, colors and effects, as described in the customization options.
If you need help, please contact us here: www.magictoolbox.com/contact/