Help with jQuery Image Magnify v1.1

[MJT]

1) Script Title: :: jQuery Image Magnify v1.1

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...agemagnify.htm

3) Describe problem: Hello, I am new to coding, so thanks in advance for your help.

The script works well at my page:

http://www.clamtrax.com/Series10newmag.html

with one problem; each magnified image displays under some of the other page elements; specifically, the other thumbnail image, and the drop-down boxes. These results are identical in IE8, Chrome 8, and Safari 5. I would like each magnified image to display over any and all of the other elements on the page.

Full source code for the page at
http://www.clamtrax.com/newmag.txt

Thank you very much in advance for any help that you could offer.
Best Wishes, Michael

[jscheuer1]

I don't think it makes any difference to the page's working, but it would be much more efficient if you could use just one version of jQuery. To that end get rid of:

<script src="jquery.js" type="text/javascript"></script>

But that will create a minor problem. To fix that and to fix the problem you are asking about, add this highlighted script as shown:

<script type="text/javascript" src="jquery.magnifier.js">

/***********************************************
* jQuery Image Magnify- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>
<script type="text/javascript">
var $ = jQuery;
jQuery.imageMagnify.zIndexcounter = 1000;
</script>
<script type="text/javascript">
var i;
var j;
var k;
var l;
var er . . .

Notes:

• The first line puts jQuery back into normal mode. The jquery.magnifier.js script had put it into noConflict mode. Overcoming that (as far as I can tell) was the only real purpose of having two versions of jQuery on the same page. Make sure your other jQuery dependent code still functions properly. If not, restore the the script I told you to remove and get rid of the var $ = jQuery; line.
  
  
• The second line boosts the default starting z-index for the magnifier so that it can display over the other elements on the page which currently have higher z-index.
  
  
• In IE 6 and less, the select drop down elements will still show through. There's a fix for this. But with IE 6's use low and in rapid decline, I don't think it's worth it. It probably would be complicated to get it to look right in IE 6 and less and not intrude on other browsers.

See the second chart on:

http://www.w3counter.com/trends

to understand the lack of importance for supporting IE 6.

However, if you happen to know your site gets high traffic from IE 6, it might be worth bothering with the fix.

[MJT]

Hello, John,

Your solution worked perfectly . I greatly appreciate the time, talent, and effort that you offered in helping me solve my problem. I wish you all the best now, and for the Holiday season.

Best Wishes,
Mciahel