Tip:
Highlight text to annotate it
X
In today's tutorial i'm going to show you how to install Magic Zoom Plus in WebExpress.
You can use this video to install Magic Zoom Plus, Magic Zoom, Magic Thumb, Magic Magnify
Plus and Magic Magnify as the process is the same. For today's tutorial I'll be installing
Magic Zoom Plus. Don't be put off by the length of this video. Installing Magic Zoom Plus
only takes a few minutes. The rest of the video shows a couple of quick customizations
and then a detailed explanation of how to get the Multiple Images effect on your site
which you can see here in action. Okay, so let's get started. First, download the demo
version of Magic Zoom Plus and go to the folder it's downloaded to on your computer. The file
you've just download is a zip file, so you need to extract the files before you begin.
Find the 'magiczoomplus' folder. Inside, there are two files called CSS and JavaScript which
we'll be referencing later. There's also a 'graphics' folder. Images in this folder will
automatically be pulled into Magic Zoom Plus. We need to copy the 'magiczoomplus' folder
and paste it into the area where your WebExpress files are located. And there it is. You can
see I've got an 'mages' folder which has the small and large images I'll be using. So if
we go to WebExpress. I'm using version 3 for this tutorial. On each page where you want
to display Magic Zoom Plus you'll need to reference the JavaScript and CSS files we
were just looking at. First reference the JavaScript file via: Edit > Scripts > New
> Extensions > Add. Add src in the Name field. Tick Specify Value, Remember to also reference
the folder the JavaScript file is in otherwise WebExpress won't be able to see it. You'll
be asked if you want to save the Script changes. Select 'yes' for this. We'll do the same for
the CSS file. This time through the Format menu > Edit Style Sheets > Style Sheets > Add
Link. Again remember to reference the folder where the CSS file is located. Now that's
done, we can add the small image we're going to use on the web page. Click the 'insert
image' icon, and find the small image on your computer. I'm not copying my files to my website
for this example but of course you follow your normal process for this. I've saved my
small image in the Images folder so I'll need to reference that too. Once the image is inserted,
highlight it and press F5. We're going to link the small image and the large images.
So this time select the large image. Again, add the folder location to your image reference.
Next, we need to add a Class of Magic Zoom Plus which is done via Extensions. Enter 'class'
in the Name field, and tick Specify Value. When entering Magic Zoom Plus, make sure it's
one word and that M, Z and P are all capital letters. And that's it. Save your changes.
And now we can preview Magic Zoom Plus in action. And that's how easy it is to add Magic
Zoom Plus to WebExpress. Now that Magic Zoom Plus is installed I'll show you how easy it
is to make changes. First, i'll increase the zoom size and then change the enlarged background
color. To do this go back to the Magic Zoom Plus product page, and click the Integration
link on the left hand side. At the top of the page you'll see a list of anchor links.
We'll be using Number 2 Zoom and Number 15 Background. Select Number 2 Zoom first. When
you install Magic Zoom Plus the zoom size defaults to 300 pixels. I want to change that
to 400 pixels but you can have any size you want. The code we need is rel attribute zoom-width
/ zoom-height. Select your small image back in WebExpress and open the Create/Edit Link
box. Click Extensions. You can see the existing Class attribute. Now we're going to add a
rel attribute. Enter rel in the Name field. Tick Specify Value, and enter the zoom-width
zoom-height code we've just seen on the Integration page. Scroll back up to the top of the Integration
page and this time select Number 15 Background. You can see the rel attribute shows details
for the Opacity and the Background Color. The opacity default is thirty percent. If
you want to change this then use the code shown. I'm just going to change the background
color for this example. We'll add the new code in the existing rel attribute box. Simply
add a semi colon to separate the attributes and then enter the new code. I'm using the
color code for red, but you can use any color you want. Once that's ok'd, you can see the
new rel attribute is now listed. If you wanted to add more changes, just modify the existing
rel attribute. Now when we preview Magic Zoom Plus, you can see the zoom size is bigger
and the enlarged background color is red. As I mentioned at the beginning of the video,
i'm going to show you how to add the Multiple Images option. There are more steps involved
so it'll take about 5 minutes to go through this. Multiple Images is perfect if you have
more than one color for a product. To achieve the effect you'll need 3 image sizes for each
product. I've saved mine in the 'Images' folder. My large images are 840 pixels width. The
small images are 290 pixels width, and the tiny images are 90 pixels width. Of course
you can use any size you want. So, they're the images I'll be using. If you go back to
the Magic Zoom Plus product page and click the Integration link. This time select Number
8 Multiple Images from the anchor links, I'll show you where the images appear in this example,
the tiny images are the thumbnail options, each small image will appear as the main image
on the page, and the large images are used for the zoom and enlarge effects. You can
see each image visible has its own section of code. The html code in the box looks a
lot, but it isn't if you break it down. This is what we'll use to create the Multiple Images
effect in WebExpress. As I mentioned earlier you'll need to reference the JavaScript and
CSS files on any page you want Magic Zoom Plus to appear. First we'll reference the
JavaScript file via: Edit > Scripts > New > Extensions > Add. Add src in the Name field.
Tick Specify Value, and remember to enter the folder the JavaScript file is saved in.
You'll be asked if you want to save the Script changes. Select 'yes' for this. Then add the
CSS file via Format > Edit Style Sheets > Style Sheets > Add Link. Again, remember to enter
the folder the CSS file is saved in. Once that's done, we can start inserting the images
which will appear on the web page. Click the 'insert image' icon. Choose the small image
you want to appear as the main image, again enter the location of the image in the url,
and the three tiny images that will show under the main image. I'll add the coral tiny image
first. The image is saved in a folder so I'll add that to the reference. Then I'll insert
the grey tiny version. Again, enter the location of the image in the url, and finally I'll
add the lime tiny image, and enter 'images' folder in the url reference. Once that's done,
select the main image and press F5 to open the Create/Edit Link box. Find the large version
of the image. For me that'll be the large coral image. And reference the folder the
image is in. Now click Extensions and we'll add the Magic Zoom Plus class. Remember to
type Magic Zoom Plus as one word, with capital letters for M, Z and P. We're also going to
add an id attribute. This will link all the images together. I'm going to use 'trainers'
for this but you can use any word you want. So that's the main image done. Now i'll move
onto the first thumbnail image. So, select the first thumbnail and press F5. Select the
large version of the thumbnail image. Again for me this is the large coral image. Once
you've referenced the large image folder, click Extensions. We're going to add two attributes:
rel and rev. Add the rel attribute first. For me it's zoom-id trainers. Whichever word
you used in the earlier step you'll need to enter it here. Next, add a rev attribute,
and enter the reference of your small image. For me this is the small coral image. And
we're going to repeat what we've just done for the next two thumbnails. So, select the
second thumbnail and Press F5. Then select the large version of the thumbnail image.
For me this is the large grey image. Once you've referenced the large image folder,
click Extensions, and add the rel attribute: zoom-id trainers. And then add a rev attribute,
and enter the reference of your small image. For me this is the small grey image. And we'll
repeat the exact same steps for the last thumbnail. So for the final time, select the third thumbnail
and Press F5. Select the large version of the thumbnail image. For me this is the large
lime image. Once you've referenced the large image folder, click Extensions, and add the
rel attribute: zoom-id trainers. And finally add a rev attribute, and enter the reference
of your small image. For me this is the small lime image. And that's it. Save your page,
and now we can preview the Multiple Images effect on our web page, which I think looks
brilliant. By default you'll need to click each thumbnail for the main image to change,
but you can change this so instead of clicking you can hover over the thumbnails instead.
To do this go back to the Integration page and scroll down to the example just below
where we were. You can see the rel attribute selectors-change:mouseover. This is the code
we'll use. Go back to WebExpress, select the main image and open the Create/Edit Link box,
Add the rel attribute selectors-change:mouseover and OK your changes. Now when we preview our
web page the main image will change when you hover over each thumbnail. If you're not sure
how you want to display your images, go to the Magic Zoom Plus Examples page. Whether
you want to use an internal zoom or reverse opacity, this page will give you some great
ideas. All the HTML code you'll need to make the changes is on the Integration page. Use
the anchor links at the top to help you navigate around the page easily. At the top of each
page on our website 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.