Tip:
Highlight text to annotate it
X
In today's tutorial i'm going to show you how to install Magic Thumb in WordPress. If
you go to the main product page you'll see the WordPress icon on the right hand side
which will take you to the Magic Thumb for WordPress page. Magic Thumb is a great way
to display lots of images without taking up too much space. It uses a lightbox effect
which means images load instantly. To begin installation we need to download the demo
version of the WordPress plugin. Next, go to your WordPress admin area and select Plugins.
Click Add new and then click Upload. This will take you to the Upload page. Browse your
computer for the plugin you've just downloaded, this will be a zip file called mod wordpress
magic thumb. And select Install now. Once that's done select Activate Plugin. You can
see under Plugins, Magic Thumb is now showing. Next go to the page or post you're working
on. Notice i'm working in the HTML view not the Visual view. Click the Add Media icon.
Either upload your image or choose an image from your Media Library. Select the image
you want to use as your enlarged image. The text that appears in this Title field will
appear automatically under your image when it's enlarged, so I'm going to change this.
Then select the size you want the large image to appear on your WordPress page. I'm going
to use medium. And click Insert Into Post. You can see that WordPress has added a Class,
which I'll delete because we don't need that. WordPress will sometimes add a rel tag here
too, which you should also delete. Now we'll add our own Class of Magic Thumb after the
href image reference. Make sure Magic Thumb is one word and that each word begins with
a capital letter. If you preview what we've done so far you'll see when you enlarge your
image the Title name is showing underneath. Can you see how smooth the motion is when
the image expands, this is called the Linear effect. I'm going to change this to an Elastic
effect. Also, i'm going to darken the background area around my enlarged image. To make these
changes go back to your WordPress admin area and select the Magic Thumb plugin you've just
installed. You'll be taken to a page called Magic Thumb settings. Here you can make amazing
changes to Magic Thumb with very little effort. To change the expanding effect simply select
Elastic instead of Linear. I'm also going to change the restoring effect to Elastic
so when my image closes it looks the same. The reason there's no background color around
my enlarged image is because it's currently set to zero. I'm going to change this to fifty
five. The color default is set to black which i'm going to keep but you can change this
to any color you wish. Always remember to save your settings when you make changes to
this page. Now, if I reload my web page you can see the enlarge effect is no longer Linear,
it's elastic. And I now have color in the background around my image. If you're not
sure how you want to display your images, go to our Magic Thumb Examples page. It's
full of great ideas: from multiple images of a product to positioning enlarged images
in different places. And everything in between. All the HTML code for our examples and more
can be found on the integration page. And don't forget your Magic Thumb settings page.
Try all the options and see what works best for your WordPress website. At the top of
each page on our website there's a Contact Us link. If you need any additional help with
Magic Thumb or any of our other tools, just get in touch. If we're not online when you
send your message through, we'll get back to you the very next day. And that brings
us to the end of this tutorial. Thanks for watching.