The majestic Magic Zoom Plus for Weebly.

Experiment with a free trial before you buy.

  • Browse products fast and naturally on mobile and desktop.
  • Reliable - beautifully coded, clean HTML and JavaScript.

Install | Download

Boost your own Weebly website conversions now with the number 1 Weebly image effect: zoom on hover and enlarge on click. This incresible two-in-one effect is powered by the magnificent Magic Zoom Plus extension.

The best Weebly image zoom extension, your visitors will experience your images in beautiful detail. You won't sacrifice your websites design either, simply customise Magic Zoom Plus with up to 70 options to suit your website style. Choose the zoom style, the size, the hover effects, the enlarge effects, colours and styling.

Don't take our word for it - try it yourself! Get the free trial of this Weebly image zoom now or buy it with the confidence of our 30-day moneyback guarantee.

Installation

  1. Download Magic Zoom Plus (free and fully functional demo version).
  2. Unzip the contents of the zip file.
  3. Edit CSS in Weebly Login to Weebly, go to your Theme tab, select your theme and click Edit HTML/CSS.
  4. Next, create 2 new folders. Click the '+' sign next to 'Assets' > Select 'New Folder > Name new folder 'magiczoomplus'.

  5. Highlight new 'magiczoomplus' folder > Click 'Settings icon > Select 'New Folder' > Name new folder 'fonts'.

  6. Now your folders are created, upload the following files from your Magic Zoom Plus unzipped folder to the corresponding folder on Weebly:

    • magiczoomplus/magiczoomplus.css
    • magiczoomplus/magiczoomplus.js

    • magiczoomplus/fonts/magictoolbox-thin.eot
    • magiczoomplus/fonts/magictoolbox-thin.svg
    • magiczoomplus/fonts/magictoolbox-thin.ttf
    • magiczoomplus/fonts/magictoolbox-thin.woff
  7. Click Add new files again (next to 'Assets') and now upload the images you wish to zoom. (Upload a small image and a large image). Click Save.
  8. Edit CSS in Weebly

    Go to the Pages tab > click the page where you want to add Magic Zoom Plus > click SEO Settings and in the Header code field, paste this code:

    <link type="text/css" rel="stylesheet" href="/files/theme/magiczoomplus/magiczoomplus.css"/>
    <script type="text/javascript" src="/files/theme/magiczoomplus/magiczoomplus.js"></script>
    
  9. Go to the Pages tab, where you want to add Magic Zoom Plus, then click Build (Edit Page).
  10. 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).

  11. Magic Zoom Plus should now be working! Customize Magic Zoom Plus as you wish using the HTML settings here.
  12. Buy Magic Zoom Plus To upgrade your free and fully functional trial version of Magic Zoom Plus (which removes the "Trial version" text), buy Magic Zoom Plus or get a free Magic Zoom Plus license (for non-commercial sites such as personal blogs and charities). Then overwrite the demo magiczoomplus.js file with the one from your licensed version.

Useful Tips

  1. Repeat Steps 8, 9 & 10 for each page where you want to add Magic Zoom Plus.
  2. Images won't show while you are creating your zoom - to see them you must Publish your page to see the live site.
  3. Once installed, you can change the size, colors and effects, as described in the customization options.

Uninstallation

Thanks for trying Magic Zoom Plus on your Weebly site! What did you hope Magic Zoom Plus could do? How can we improve it? Let us know, we're always improving our tools based on customer feedback.

  1. Login to Weebly, go to the Pages tab, click the page where you want to remove Magic Zoom Plus.
  2. Delete the Custom HTML element in your page which contains code:

    <a href="/files/theme/YOUR-BIG-IMAGE.jpg" class="MagicZoom"><img src="/files/theme/YOUR-SMALL-IMAGE.jpg"/></a>
    
  3. Go to the Pages tab, click the page where Magic Zoom Plus is to be removed, click SEO Settings and in the Header code field, delete this code:

    <link rel="stylesheet" href="/files/theme/magiczoomplus/magiczoomplus.css"/>
    <script src="/files/theme/magiczoomplus/magiczoomplus.js"></script>
    
  4. Go to your Theme tab and click Edit HTML/CSS.
  5. Go to 'Assets' > Delete 'magiczoomplus' folder (and its sub-folders).
  6. Magic Zoom Plus is now uninstalled.

FAQ

  1. Can I remove bounce effect from mobile devices?

    Yes! To disable the bounce effect from small screen devices, add the following CSS to your magiczoomplus.css file:

    .mobile-magic .mz-figure > img {
    opacity: 1 !important;
    }
    .mobile-magic .mz-figure > img + img {
    transform: scale(1) !important;
    }

    .mobile-magic .mz-figure {
    -webkit-perspective: none !important;
    perspective: none !important;
    }
    .mobile-magic .mz-figure > img {
    opacity: 1 !important;
    }
    .mobile-magic .mz-figure:not(.mz-ready) > img:last-child {
    -webkit-transform: scale(1) !important;
    transform: scale(1) !important;
    }

Customer reviews

  Rating: 0 (0 reviews)

There are no reviews yet. Be the first!

Submit your review


Thank you!
Your review has been received and will be posted soon.
Used only to verify your review is genuine.

Other Weebly extensions

Try our other great image effects!


These instructions are for Weebly. Use them to add effects to your website including image zoom on hover/mouseover; image lightbox (enlarge image to full screen); image slideshows in JavaScript; image carousels; and image magnifiers.