Magic Toolbox

Have you ever wondered how to do really cool thumbnail image effects on your blog such expanding picture, image 360’s and magnifying pictures? Well now you can with the tools provided by Magic Toolbox. They have such products like Magic Thumb which lets you expand a picture from a little thumbnail just like they do on other websites. 

Magic Toolbox makes it easy to install their code and provides great, easy to follow instruction on how to use and many different options you can use to customize it to your liking. However, for those who don’t host are own websites, upload the .css and .js files can be difficult. Here’s guide for on how to use install Magic Thumb (any almost any other .css and .js code) for blogger.

Hosting

After downloading Magic Thumb (either the free or commercial license) , unzip the archive and locate the “magicthumb” folder. Inside should be a two file called “magicthumb.js” and “magicthumb.css”. Now what we need to do is host these files and the easiest way to do this in my opinion is with Google Sites.  I think it’s possible to use any other file hosting site but this seemed to work best for me. Login into your Google account and create a site. It doesn’t matter what you name the site but you could create one for future use. Once done, click on “More actions” and go to “Manage site”. From there, click on the “Attachments” tab and upload both the “magicthumb.js” and “magicthumb.css” file.

Installation

To install the code in your blog go to your Blogger Dashboard and go the Designs tab. Once there, click on “Edit HTML” and scroll all the way down to the bottom of your blog’s HTML code. Somewhere before the “</body></html>” tags insert the following code:

<link href='X' media='screen' rel='stylesheet' type='text/css'/>

<script src='Y' type='text/javascript'/>

However in place of “X” you would copy the url location of your “magicthumb.js”. This can be done by right clicking the blue “download” link and selecting “Copy link address.” You can do the same thing for “Y” except use the “magicthumb.css” download location. Interestingly enough, when you paste the url, it will include “…magicthumb.css?attredirects=0&d=1”. Blogger doesn’t seem to like the “?attredirects=0&d=1” part so be sure to delete that in order for the code to work.

Use

To use the code in a blog post go select the “Edit HTML” tag and insert the following code:

<a href="A" class="MagicThumb"><img src="B" alt=""/></a>

“A” would be were you would have the url location of your full sized image and “B” would be the url location of the thumbnail image. Keep in mind that Blogger can easily create thumbnail image for you be resizing the original once in the “Compose” tab.

Above are some examples of what Magic Thumb allows you to do. On the right image, it expands the thumbnail to its original size. On the left, clicking on the image expands is in addition to create a white background with 100% white opacity.

However there are many other options you can adjust to customize how the thumbnail expands in addition to different features. To just list off a few:

• Change image on mouse over
• Any background colors and opacities
• Six different expanding effect such as bounce, elastic, etc…
• Expansion speed
• Expand on mouse over
• Captions on any side
• Slide shows with transitions

Check out their site for more examples and more awesome imaging tools!