Tip:
Highlight text to annotate it
X
Okay let's take a look at Magic Touch and how to install it on to your website. So this
is Magic Touch which can zoom into any size image, it's er it's the bigger the better,
you can see I'm zooming in here and really getting the detail. And I might decide to
go into the full screen for a really huge image so in we come and zooming right in there.
You could even change the image, er so let's swap to the back of this camera so to have
a look at that, that view. And you can see Magic Touch load here, it uses lots of tiny
tiles to make the image load as quickly as possible. It only loads the tiles you actually
need in order to see the part of the image that you're requesting. Ok let's, let's get
started with installing it so I've got a really basic HTML page here, here's the code for
my page and I've got a single image here, now that's the image that I want to zoom so
I've got that image in my images folder here, one is small one is large. Let's take a look
at the large one and you can you can see that's a really big image so if you’ve got smaller
images to start with there's nothing you can do with it so you've got to start off with
some really big images so preferably a thousand pixels or even more hmm two thousand pixels
three thousand pixels you name it. Okay let's go and sign up to the Magic Touch service.
And I'm just going to create a test account here
Create the account
And just log in
Okay here's the account activation form so that's says Hi, thanks for thanks for joining
so we'll activate the account like that and here's our account so let's go straight over
to, to Magic Touch
And, we're going to look at our integration and this is this is how to install Magic Touch.
The first step is add the domains where you're going to be using Magic Touch so I'll just
go in here and add that
So there's my domains gone in there. The next step to add Magic Touch number two this is
my unique code so I'm going to copy that and paste it into my HTML page, I'm going to paste
that just before the Body tag it says, so that is here. Okay the next step link your
small image to large image and put Class of Magic Touch in it here's an example so I'm
just going to copy that so here's my small image I've already got in there and I'm going
to do a HREF and this is going to link to the large image. Okay images, that's lady
large and close the A Tag like that and add a Class of Magic Touch. Right that's done
okay what's the, oh that's you've finished. Let's have a look. So I'm going to save that
HTML page and I'm going to upload it to my website let's just go into FileZilla that's
the FTP program I'm using er and into my website there's my Index page I'll just upload that
and ooops it says do you want to overwrite it and yes so that's uploaded my Index page
and I'm going in to see the page now and there it was before a static image that was no clickable
I'm just going to refresh the page
And now you can see the icon the moving icon now this is the first time that Magic Touch
is being used on this page so what Magic Touch does is that it goes over to the server, fetches
the large image, it takes it over to the Magic Touch platform, splices it into hundreds of
images and there you see it. Now that image that zoomable image is
ready for you to view
And you can zoom in nice and fast right into the image
And enlarge it, that's the full screen view
And that's it, you’ve got Magic Touch working on your site you'll see here that that's the
that's the logo for Magic Touch you can remove that by buying some zooms you've got ten thousand
free zooms every month so you don't need to buy zooms but if you like to and remove that
logo you just go back to control panel click buy zooms and there are your options. So let's
just take another look at customizing Magic Magic Touch. Here's an example down here so
I'm just going to copy that and paste that into my page
just at the bottom here
just tidy up that code a bit
So we've got three things set here we've determined we've fixed the number of levels to three,
we've put a background color in um and we've changed the plus okay so urgh let's just save
that, upload it
And refresh the page and because we've changed the number of levels it's going to re-fetch
re-slice the images er actually that's not worked that's not worked has it because we've
still got five levels okay this is good we can we can do some debugging so levels definitely
set at three there and we have oh we haven't uploaded it so that's why so let's just okay
that
Okay it's gone up now so when we refresh we're going to see three levels instead of five
and that's re-fetching the image so this is going to take a few seconds because it's got
to download the image, slice it into a different number of zoom levels
Here it comes won't be long now there it is and you can see now we've got three levels
of zoom so it's going to zoom in a lot deeper and there we are to the maximum zoom
What else could we do, there's loads of different options to choose from there are thirty parameters
let's have a look a look at them all um
You can change you can turn full screen on and off, you can change the preview area to
show or hide, you could add a watermark if you've got paid zooms, you could change the
logo, the colors, you could show a print button, a save button. Lots of things you could try.
Let's try adding a border just to show you. We'll go back to the page here
Border Width we'll give it a four
Okay let's just save that, upload it
Yeah we want to overwrite the old page. Let's go back there, refresh it
And you'll notice that this time it loaded in about two or three seconds and there it
is there's our border. A light grey border. Looks good. So that's it, really easy to install,
that's Magic Touch er if you've got anymore questions please just head over to our website
magictou er magictoolbox.com and go to slash contact and er we're waiting to help you,
five days a week, if we're offline then we'll reply to you pretty quickly the next day and
um that's it really that's Magic Touch for you. Enjoy.