Astonishing images for your website

Hover to zoom, click to enlarge

  • Zoom – fade-in, deceleration, image switching and resizing.
  • Enlarge - cool effects, captions, custom buttons and cursors.

Install | Watch video | Download

Blogger is excellent for creating beautiful websites without writing a single line of code. But nothing is perfect and even Blogger lacks a quality image zoom tool.

We have the solution! Our gorgeous image zoom effect for Blogger shows beautiful big images by zooming on hover and enlarging on click. It's a real "wow" factor for your visitors!

This image zoom and lightbox effect works perfectly on any Blogger website. With special refinements for mobile devices, all your visitors will experience your images as you intended on iPhones, iPads and other mobile screens.

Change your Blogger website from 'great' to 'incredible' with our magnificent Magic Zoom Plus image zoom tool. Try it today - we're sure you'll like it, that's why we offer every customer a 30-day moneyback guarantee.

Video instructions

Reveal every detail in your images by hovering or clicking your images on mouseover with these popular JavaScript zoom effects.

Installation

  1. Download Magic Zoom Plus (free and fully functional demo version).
  2. Unzip the file on your computer and FTP magiczoomplus.css and magiczoomplus.js files to your website server. There is no facility to upload JS files to Blogger, so you must upload the 2 files to a server and reference them in your template <head> code. (If you do not have access to a server, internet search "free web space". There are lots of free hosting options available. You can even use Dropbox.)

    (Tip: to find url reference in Dropbox: Highlight file > Right click > Select 'Copy public link')
  3. Also, FTP graphics folder to your website server. Images in this folder will automatically be displayed as part of the tool.
  4. Edit Blogger template

    Go to your Blogger Admin Area > Template > Edit HTML. Add the following code just below the <head> tag:

    <link type="text/css" rel="stylesheet" href="http://www.example.com/magiczoomplus.css"/>
    <script type="text/javascript" src="http://www.example.com/magiczoomplus.js"></script>
  5. In the code above, replace the example.com URLs with the URLs of the location where you uploaded your JS and CSS files.
  6. Insert HTML code for Magic Zoom Plus in Blogger admin

    Now you can use Magic Zoom Plus on your images. Go to your Blogger Admin Area > New Post > HTML view > reference your small image and link it to your large image. For example:

    <a class="MagicZoom" href="http://www.example.com/largeimage.jpg"><img src="http://www.example.com/smallimage.jpg"/></a>
  7. That's all!
  8. Customize Magic Zoom Plus exactly how you want it to look. All settings are described here.
  9. 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.

Uninstallation

Thanks for trying Magic Zoom Plus on your Blogger 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. Go to your Blogger Admin Area > New Post > HTML view > and delete the Magic Zoom Plus code. For example:

    <a class="MagicZoom" href="http://www.example.com/largeimage.jpg"><img src="http://www.example.com/smallimage.jpg"/></a>
  2. Go to your Blogger Admin Area > Template > Edit HTML. Delete the following code just below the <head> tag:

    <link type="text/css" rel="stylesheet" href="http://www.example.com/magiczoomplus.css"/>
    <script type="text/javascript" src="http://www.example.com/magiczoomplus.js"></script>
  3. Delete the magiczoomplus.css, magiczoomplus.js files and graphics folder from your website server.
  4. 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 Blogger extensions

Try our other great image effects!