Tip:
Highlight text to annotate it
X
In today's tutorial i'm going to show you how to install Magic Zoom in Web Studio 5.
If you’re interested in installing any of our other tools such as Magic Magnify, Magic
Thumb, Magic Zoom Plus etc into Web Studio you can use this video as the instructions
are very similar. So let's begin. If we go to the main product page you can see Magic
Zoom in action. The zoom area shows a detailed version of the image, all of which is customizable.
But before we can do that we need to download the demo version which will download as a
zip file. Then we need to extract all the files. The first file i'll be attaching to
Web Studio is a large image which will be used for the zoom image. I'll also attach
the JavaScript and CSS files. And finally i'll be attaching the Hint and Loading graphics.
But before I do i'm going to quickly edit the CSS file. The graphics I want to upload
are currently saved in a Graphics folder but when I attach them to Web Studio they'll be
attached directly. By default the CSS file references the Graphics folder so we just
need to delete this. You’ll see in the CSS file the Hint graphic reference is found under
Magic Zoom Hint and the Loading graphic is found under Magic Zoom Loading. Remember to
save the file once you've made your changes. Now we're ready to attach the files to Web
Studio. Select the attached Files option which is in Web Site Properties. First i'm going
to attach the large image. Then the CSS and JavaScript files. And finally the Hint and
Loader graphics. Once that's done, i'm going to insert the small image into my page and
double click the image to open Object Properties. Select Object HTML and choose Before the Object.
The HTML code you need can be found on the Magic Zoom Integration page. There’s the
href reference and the Magic Zoom class. Copy the code as shown and paste it into Web Studio.
Enter your large image reference here and then select After the Object. This is where
we'll close the A tag. Next we need to insert the Head HTML again this code can be found
on the integration page. This time copy all the code in the box and paste it into your
HTML Editor. You'll notice the CSS and JavaScript file references have a magic zoom folder before
them. We need to delete these as we’ve attached the CSS and JavaScript files directly to Web
Studio. Now that’s done, we can preview Magic Zoom. You can see the small image is
on the page and it links to the large image which is our zoom. Now that Magic Zoom is
installed let's make a customization. I'm going to change the zoom area so it's a bit
bigger. To do this we need to go back to the Integration page and scroll down to section
two which is Size. Out of the code shown I just need to copy the rel attribute zoom width
zoom height. This is set to four hundred pixels but you can choose any size you wish. Go back
into Object HTML and paste the code after the Magic Zoom Class like so. Now when we
preview you can see the zoom area is larger. If you're not sure how you want to display
your images, go to our Magic Zoom Examples page. Whether you want multiple images or
an internal zoom this page will give you some great ideas. 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. So if you have any questions about Magic Zoom 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.