Tip:
Highlight text to annotate it
X
In today's tutorial i'm going to show you how to install Magic Zoom Plus in WebPlus
x5. You can also use this video to install Magic Zoom, Magic Thumb, Magic Magnify Plus
and Magic Magnify as the process is the same. If we go to the Magic Zoom Plus page you'll
see we can zoom the image as well as enlarge it. To start the installation we need to download
the demo file and save it to our computer. Extract the files. The files we'll be using
are in the magiczoomplus folder. There's the JavaScript file and the CSS file. In the Graphics
folder we'll use the buttons1 image. The Hint gif and also the Loader gif. Before we add
these files to Web Plus we need to edit the CSS file. At the moment all the images are
referenced under the graphics folder which we need to delete because we'll be adding
these images directly to the root in Web Plus. So go through the whole file and delete the
Graphics folder reference. Once that's done, save your changes. First thing we need to
do in Web Plus is add the Head code. To do this, right click on your page and select
Attach HTML. We'll be pasting the Head code here over Master Page Head. Next go to the
Magic Zoom Plus Integration page and copy the Head code under Point three of the Installation
section. And then paste the code over the Master Page Head text. We need to delete the
magiczoomplus reference because we'll be adding the CSS and JavaScript files directly to the
root. When you've finished, close the Editor. Next go to Insert, Web Object, HTML and Draw
a HTML box. We're going to insert our next bit of code over the Body text. Go back to
the integration page. This time we'll copy the Body code. And paste it over the Body
text in WebPlus. The big reference is for your large image which will act as the zoom
and enlarge effects. The small reference is for the image which will appear on your website.
We also need to attach the large and small images we've just referenced to the HTML box.
I'll just reposition the box. Next we'll attach the files we need to the root by clicking
Site Manager and make sure you're in the File section. You can see the small and larges
images we've just attached to our HTML are showing. Next I'll add the button one, hint
and loader graphics. The CSS file. And the JavaScript file. Now if we preview our page,
you can see Magic Zoom Plus is working. We have the zoom and the enlarge effect. Now
Magic Zoom Plus is installed i'm going to make a couple of changes. First i'll change
the zoom size. And then change the background colour for my enlarged image. Go back to the
Integration page, and scroll down to Number two – Zoom Size. and copy the rel attribute
zoom width zoom height. Then if we go back into the HTML box, I'll paste it after the
Class code in my HTML. I'm using four hundred pixels for each size but you can use any size
you want. Next, go back to the Integration page and select Number fifteen - Background
from the list of anchor links. As we've just added a rel attribute, i'm just going to copy
the code starting from background. I'll enter a semi colon after four hundred pixels and
paste my background code after it. And change the colour reference to red. You can use any
color you want. Now when I preview my page you'll see the zoom area is larger. And my
enlarged background is now red. For ideas on how to display your images, go to our Examples
page. All the HTML code you'll need is on the Integration page. There's so many customizations
you can make, try them all and see what suits your website. At the top of each page on our
site, there's a contact us link. So if you have any questions about Magic Zoom Plus 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.