Magic Zoom Plus™ demo
This demo shows you how to use Magic Zoom Plus™ on Weebly websites.
Hover on the image to zoom, click the image to enlarge:
Hover on the image to zoom, click the image to enlarge:
Instructions
You've done it! if you wish, you can now change the size, colors and effects, as described in the customization options.
External JavaScript on Weebly
The tutorial above shows you how to upload and reference external JS files to your Weebly website. This method does not require you to embed the JavaScript in your HTML page and does not require inline JS, though inline JS can be an alternative option for using dynamic HTML on Weebly pages without linking to external scripts.
If you need help or have questions about this guide, please contact us.
- Download the free trial of Magic Zoom Plus™ (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 7 files from the magiczoomplus folder:
hint.gif
loader.gif
zoomin.cur
zoomout.cur
buttons1.png
magiczoomplus.css
magiczoomplus.js - Click Add new files again and this time 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 and click Edit for the page where you want to add Magic Zoom Plus™.
- Drag the Custom HTML element into your page and paste this code:
<a href="files/theme/YOUR-BIG-IMAGE.jpg" class="MagicZoomPlus"><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/magiczoomplus.css"/>
<script src="files/theme/magiczoomplus.js"></script> - Magic Zoom Plus™ should now be working!
- Last thing... to make the icons and buttons show up, go to the Design tab, click Edit HTML/CSS and click the main-styles.css page. Insert the following code at the bottom of the CSS file:
.MagicZoomPlus, .MagicZoomPlus:hover {cursor: url(zoomin.cur), pointer;}
.MagicZoomPlusHint {background: url(hint.gif) no-repeat 2px 50%;}
.MagicZoomPup {cursor:url(zoomin.cur),pointer;}
.MagicZoomLoading {background: #fff url(loader.gif) no-repeat 2px 50%;}
.MagicThumb-expanded {cursor: url(zoomout.cur), pointer;}
.MagicThumb-buttons {background: transparent url(buttons1.png) no-repeat 0 0;}
.MagicThumb-loader {background: #fff url(loader.gif) no-repeat 2px 50%;}
You've done it! if you wish, you can now change the size, colors and effects, as described in the customization options.
- To remove the red text "Please upgrade to full version of Magic Zoom Plus™" message, buy a license for Magic Zoom Plus™, then upload your licensed magiczoomplus.js file (overwriting the demo magiczoomplus.js file).
External JavaScript on Weebly
The tutorial above shows you how to upload and reference external JS files to your Weebly website. This method does not require you to embed the JavaScript in your HTML page and does not require inline JS, though inline JS can be an alternative option for using dynamic HTML on Weebly pages without linking to external scripts.
If you need help or have questions about this guide, please contact us.