I'm having trouble positioning my zoom box

[dweinin]

Hi Everyone.

I just downloaded MagicZoom and I'm digging it a lot.  Total rookie at this.

I am a designer by trade and fumble my way through code.  I'm trying to move my zoom box down and to the right.  I know I need a custom setting to do this but every time I try I totally screw it up.  Everything else I've gotten to run pretty smooth.

HEre is my code that is working great.  It's sets the zoom off to the right a nice amount.  Now I need to move it down.

<a href="../../Graphics/Product/EV106A.jpg" class="MagicZoom" rel="zoom-distance:40"><img src="../../Graphics/Product/EV106Small.jpg" /></a></div>

I know I need this bit of code

<a href="../../Graphics/Product/EV106A.jpg" class="MagicZoom" id="EVIsland" rel="zoom-position: custom><img src="../../Graphics/Product/EV106Small.jpg"/></a>

So I replaced the first round of code with the above code and directly underneath that I have

<div id="EVIsland-big"></div>

So it looks something like this

<a href="../../Graphics/Product/EV106A.jpg" class="MagicZoom" id="EVIsland" rel="zoom-position: custom><img src="../../Graphics/Product/EV106Small.jpg"/></a>
<div id="EVIsland-big"></div>

This throws everything out of wack.  What am I doing wrong.

Any Help is greatly appreciated.

Thanks.
-Drew

[dweinin]

Here is a link to the current page and the magic zoom in action.  Nothing fancy but it's very close to working just like I want it to work.  I just cannot get that zoom box to move down.

Again any help is appreciated. Thanks in advance.

-Drew

http://www.evisland.com/Pages/ProductsPages/Products105.html

[igga]

Hi,

If you want to move zoomed image down you can use custom position with absolutely positioned DIV.

Simpler solution is to use following CSS rule:

.MagicZoomBigImageCont { margin: 50px 0 0 0; }

[dweinin]

Hi Igga.

Thanks for the reply.

Where do I put the   .MagicZoomBigImageCont { margin: 50px 0 0 0; }

In my body or header?

I am not good with code.  I can fumble my way through it though if you can tell me how to implement it.

I appreciate any help!

Thanks.

[Alex]

Hi dweinin,

You need:

1. Open magiczoom.css file.

2. Find these lines:

Code:

    /* Style of zoomed window */
    .MagicZoomBigImageCont {
    border: 1px solid #999;
    }

3. Add a line "margin: 50px 0 0 0;"  inside the braces like so:

Code:

    /* Style of zoomed window */
    .MagicZoomBigImageCont {
    border: 1px solid #999;
    margin: 50px 0 0 0;
    }

That's it!

Best wishes,

Alex