jQuery Image Magnify v1.11 Help please

[kennyd4110]

1) Script Title: jQuery Image Magnify v1.11 Help please

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

3) Describe problem:

Hello, I have what I hope is a quick question please:

I am starting to run the jQuery Image Magnify v1.11 scripts on my site at www.boltonhooks.com, I love it so far except for one small problem:

On this page: http://www.boltonhooks.com/proof.html the pictures are opening behind the embedded YouTube frame making the magnified image unveiwable. Seems to work in Chrome but not IE or FF.



Also, the cursor is not changing to the magnifying glass in IE, working fine in Chrome and FF. I have the magnify.cur file uploaded to my server, and the .js file points to it as instructed.



Thanks for all the great stuff on your site!


I am very new to all this web design stuff, so be easy on me please

[jscheuer1]

First thing to try is wmode transparent for the videos, example (add the highlighted):

<iframe width="560" height="315" src="http://www.youtube.com/embed/CyBKkaCXJA0?wmode=transparent" frameborder="0" allowfullscreen=""></iframe>

[kennyd4110]

John, that seems to have worked perfectly! I have no idea what it did-that's way above my paygrade Hopefully your advice will help others in the future as well.

Any thoughts on the magnifying glass issue in IE? Or just don't worry about it?

[jscheuer1]

The wmode (window mode) of the video set to transparent tells the browser that it may show HTML content over the video. Not all browsers require this permission, but some do.

I missed that you had also asked about the cursor. That's a known issue due to changes in how IE reads the cursor style property's value here in the script:

/* jQuery Image Magnify script v1.1
* This notice must stay intact for usage 
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code

* Nov 16th, 09 (v1.1): Adds ability to dynamically apply/reapply magnify effect to an image, plus magnify to a specific width in pixels.
* Feb 8th, 11 (v1.11): Fixed bug that caused script to not work in newever versions of jQuery (ie: v1.4.4)
*/

jQuery.noConflict()

jQuery.imageMagnify={
	dsettings: {
		magnifyby: 3, //default increase factor of enlarged image
		duration: 500, //default duration of animation, in millisec
		imgopacity: 0.2 //opacify of original image when enlarged image overlays it
 	},
	cursorcss: 'url(magnify.cur), -moz-zoom-in', //Value for CSS's 'cursor' attribute, added to original image
	zIndexcounter: 100,

Using a text only editor like NotePad, edit the jquery.magnifier.js script and change that to url(magnify.cur), pointer:

/* jQuery Image Magnify script v1.1
* This notice must stay intact for usage 
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code

* Nov 16th, 09 (v1.1): Adds ability to dynamically apply/reapply magnify effect to an image, plus magnify to a specific width in pixels.
* Feb 8th, 11 (v1.11): Fixed bug that caused script to not work in newever versions of jQuery (ie: v1.4.4)
*/

jQuery.noConflict()

jQuery.imageMagnify={
	dsettings: {
		magnifyby: 3, //default increase factor of enlarged image
		duration: 500, //default duration of animation, in millisec
		imgopacity: 0.2 //opacify of original image when enlarged image overlays it
 	},
	cursorcss: 'url(magnify.cur), pointer', //Value for CSS's 'cursor' attribute, added to original image
	zIndexcounter: 100,

The -moz-zoom-in value is no longer needed, as those browsers now use the url cursor value. Using -moz-zoom-in, which is non-standard in IE, invalidates the entire cursor string, so it shows an arrow (the default cursor). A fallback to a valid standard cursor is required though, both for IE to use the url one and for some browsers (Opera is one) which might not be able to use the url one.

The browser cache may need to be cleared and/or the page refreshed to see changes.

[kennyd4110]

OK John we have change...the cursor now changes to a pointing finger (like a link) in all three browsers rather than changing to a magnifying glass. Not sure if that was your intended purpose?

Thanks for explaining the changes you are suggesting rather than just saying "do this because I said so", it really helps us all.

[jscheuer1]

That's an invalid path.

Change:

url(www.boltonhooks.com/magnify.cur), pointer

to (absolute path):

url(http://www.boltonhooks.com/magnify.cur), pointer

or (network path):

url(/magnify.cur), pointer

You can even use the relative path:

url(magnify.cur), pointer

But that will only work with pages in the same folder as the magnify.cur file.

[kennyd4110]

to (absolute path):

url(http://www.boltonhooks.com/magnify.cur), pointer

Bingo, that was the problem. I should have caught that!

It is working perfectly in all three browsers now on two different machines.

You are the man John!