Tip:
Highlight text to annotate it
X
Here's our Top 6 Tweaks to customize Magic Zoom to suit your website. From CSS adjustments
to Showing entire images on hover. The zoom area defaults to 300 pixels. You can change
this by copying the Rel Attribute zoom-width; zoom-height from the Magic Zoom Integration
page. I'm going to change it to 400 pixels. Paste the Rel Attribute after the Class Magic
Zoom code in Dreamweaver. I'm using Dreamweaver MX for this example. You can see the zoom
size has now increased. Another tweak is to swap between images. This is a good choice
if you're using Product pages as you can display all the colour options for a product. Copy
the full code shown on the Integration page and paste into your file. The big reference
is your zoom image; the small reference is the main image on the page; and the tiny reference
is the thumbnail image. Add your own html code depending how you want the images display
on your page. As you can see from the Preview this works well. We're going to change the
colors for the hint text; hover area; zoom border and the border shadow using the CSS
file which you can find in the magiczoom folder you uploaded to your server during installation.
The Dot Magic Zoom Hint controls the hint image and text. Dot Magic Zoom Big Image Cont
controls the zoom border. Dot Magic Zoom Pup controls the hover area; and Dot Magic Box
Shadow controls the zoom shadow. Remember to save your changes before previewing. You
can see here everything is now red. Showing the entire image is great for Product Listing
pages as your customers can stay on one page and still see all your products in detail.
Copy all the code shown on the Integration page. You'll notice we're using Rel Attribute
Entire Image. Paste the code into your file and enter your big image references. And your
small image references. I've added breaks to each line just so my images will display
vertically. You can see in the Preview how great it looks using just three images. Imagine
a whole page of products. That would look fantastic. The zoom area default is set to
be external. You can easily change this to be internal by copying the Rel Attribute Zoom
Position and set the position to Inner. Go to your html file and paste this new code
after the Class Magic Zoom code. You can see in your Preview it's a simple change but very
effective. The last set of tweaks are all to do with the hint which displays on your
image. You can remove the hint completely by adding the Rel Attribute Hint and set it
to False. Copy the code from the Integration page and paste it into your html file after
the Class Magic Zoom code. If we now preview the change you can see in the hint has completely
gone. To add any text you want as your hint, enter the Rel Attribute Hint Text. Go to the
Magic Zoom Integration page and copy the code you need from here. Paste it into your html
file after the Class Magic Zoom code. And simply add the hint text you want to show
on your image. I've used Any Text You Want for this example. If you've added text to
your hint but decide you only want the magnifying glass you can remove the text by using the
Rel Attribute Hint Text again, only this time use a semi-colon instead of entering text.
Go to the Integration page and copy the Rel Attribute Hint Text code and paste it into
your file after the Class Magic Zoom code. I already have this code in my file so I'm
just replacing the text section with a semi-colon. In the Preview you can see the text has now
gone. The default hint icon is a magnifying glass. This can be changed to any image you
want. You can add the code shown on the Integration page directly to your html file if you only
want one page to be changed. If you want the whole website to show your new hint image,
you'll need to make the change in the CSS file. Go to Dot Magic Zoom Hint and change
the word hint in the Background option to the name of your gif image. Remember to save
your changes. We've come to the last tweak and this one is to change the position of
the hint. Go to the Integration page and for this example we're going to change the hint
position from bottom right, br, to top centre, tc. Each position has been abbreviated, so
top right is tr, bottom left is bl and so on. Copy the Rel Attribute Hint Position and
paste it into your html file after the Class Magic Zoom code. Then simply change br to
tc. You can see in the Preview the hint has moved to the top of the image. And that brings
us to the end of our Top 6 Tweaks. I hope you liked them. For more ideas on how to customize
your website go to the Magic Zoom Integration page. Thanks for watching.