Tip:
Highlight text to annotate it
X
In today's tutorial I'm going to show you how to install Magic Thumb in Dreamweaver.
Not only does Magic Thumb enlarge small images to full screen. You can also have captions,
navigational arrows to browse images without returning to the page and also links too.
To get started I'm going to download the demo file on the product page and save it to my
computer then extract all the files. The magicthumb folder is the folder I need. I'm working locally
on my computer so I'll copy this and save it here. You'll need to upload the magicthumb
folder to your server. Within the folder there are CSS and JavaScript files which I'll be
referencing soon in my Head HTML code. Go back to the Magic Thumb product page and click
the Integration link on the left hand side. Scroll down to the Installation section. If
you have no code in your html file then copy all the code provided. I already have some
so I'm just going to copy the Script and Link Rel Attribute of the Head section and paste
it into the Head section of my file. I'm using Dreamweaver MX for this example. I'll just
tidy up my code a bit. You can see the CSS and JavaScript files are referenced in the
Head code. If you move the files out of the magicthumb folder for any reason, remember
to update the location references here in the Head section otherwise Magic Thumb won't
work. Now we can go back to the Integration page and this time I'll copy the Body code
and paste it into the Body section of my HTML file. The href reference is my large image
which will be the enlarged expanded effect. There's the Magic Thumb class and the Image
Source is the small image that will appear on my web page. I've saved my images in an
images folder so I'm just going to reference that too. Now if I preview my page you can
see Magic Thumb is working. You'll notice the navigation arrows haven't appeared on
the enlarged effect. This is because I'm only using one image. As soon as you add a second
image the arrows will automatically appear. Now that Magic Thumb is installed, I'm going
to make a couple of changes. First, I'm going to change the expand effect from a smooth
Linear effect to a Bounce effect. Then I'll add a background color to the enlarged effect.
To do this we need to go back to the Integration page. You'll notice we have anchor links at
the top, this is to make it easier to navigate around the page. Click the Number 6 Effect
option. There are other options you can choose from as well as Bounce and Linear which I'm
highlighting here. In the example code, copy the rel attribute expand effect and paste
it after the Magic Thumb class. Where Bounce is shown you can enter any of the other options
I've just highlighted in the last step. Next I'm going to use the code in the Background
section. By default the background color is grey, so if you want to keep this copy the
rel attribute background opacity which will allow the grey to be seen. I want to change
the color so I'll use the code below. I don't want to change the speed so I won't copy this
code. But if you do you'll need to copy this code too. I already have the rel text in my
code, so I'm just copying from background opacity and enter a semi-colon after bounce
then paste my new background code. The opacity is set to eighty, I'm going to change this
to sixty, and I want the color to be red. Now if I preview, you can see my expand effect
is no longer linear, it's bounce, and my background color is now red. 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 repositioning your caption and inserting images in it too.
All the HTML code for our examples and more can be found on the integration page. At the
top of each page on our website there's a Contact Us link. If you have any questions
about 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.