Magic Zoom z-index issue with IE 9

Question

Has anyone experienced a z-index problem with Magic Zoom on IE 8 or 9?

I have an element with z-index: 1
MagicZoom creates an element with z-index: 100
However IE9 displays the element with z-index 1 on top of the 100.

Here is the page.

The weird thing is, I can no longer reproduce the problem if I "freeze" the condition and removing magiczoom.js. Here is the result, perfect even on IE 9.

Anyone knows how to fix this?

what handler binds the output to what div? i am having trouble understanding where you are binding the "zoom" too. — Dan Kanze, Feb 01 '13 at 01:33
Hi Dan, thanks for looking at it, sorry I'm not sure what you mean. The js will modify a.MagicZoom — Aximili, Feb 01 '13 at 01:44
So you have a javascript thats binded too the a tag. So where does the output get binded too? — Dan Kanze, Feb 01 '13 at 02:07
Sorry what does 'binded' mean? This is a 3rd party script I didn't write it. — Aximili, Feb 01 '13 at 02:20
So think of two parameters. Input, what you are passing the script (the tag) --- and output (the zoomed in version
container). That container should be referenced for the output of the zoomed in version of the image no? — Dan Kanze, Feb 01 '13 at 03:12
I don't know what the script does exactly, but using "inspect element" I tried copying what it did (http://famous.fbstest.com.au/CustomPages/zindex.html) however I could not reproduce the z-index problem. — Aximili, Feb 01 '13 at 03:51
You can position the zoomed image literally anywhere on your page if you give it a unique id and reference it with the div. Place your div anywhere in your code and position it with CSS. Example HTML: Zoom `
` — zb', Feb 01 '13 at 04:29
so I would suggest to add targeting div to body and set it's position via css — zb', Feb 01 '13 at 04:29
@eicto You're the man! Thanks so much!!! Could you please cut and paste your comment into an answer? :) — Aximili, Feb 01 '13 at 05:17

zb' · Accepted Answer · 2013-02-01T05:29:45.557

1

Documentation says:

You can position the zoomed image literally anywhere on your page if you give it a unique id and reference it with the div. Place your div anywhere in your code and position it with CSS. Example HTML: Zoom

<a href="big.jpg" class="MagicZoom" rel="zoom-position:#yourzoom">
    <img src="small.jpg"/>
</a> 
<div id="yourzoom"></div>

so I would suggest to add targeting div to body and set it's position via css Or you can try to add target div to td element, but if table will have other rows/collumns problem will probably reappear.

edited Feb 01 '13 at 05:29

answered Feb 01 '13 at 05:23

zb'

8,071
4
41
68

I noticed I wasn't using the latest version because zoom-position doesn't work. Upgrading to the latest version fixed the bug without even changing the zoom-position. Thanks a lot eicto! – Aximili Feb 01 '13 at 06:00

score 0 · Answer 2 · answered Feb 01 '13 at 12:45

0

You are using version 3.1.18 of Magic Zoom which is 3 years old.

This issue will be resolved if you upgrade to the latest version: 4.0.19.

answered Feb 01 '13 at 12:45

Dan Roberts

517
7
13

Magic Zoom z-index issue with IE 9

2 Answers2