PDA

View Full Version : jQuery Image Magnify v1.11



enockaddey
03-23-2011, 03:47 PM
Hello members,

I have in cooperated the jQuery Image Magnify v1.11 (http://www.dynamicdrive.com/dynamicindex4/imagemagnify.htm) into a website I'm creating and it's working well.

The default of this script is such that when the image is not yet enlarged and one hovers the mouse over the image the cursor turns into a magnifier which is cool.

I just want to know how to make the cursor turn into a de-magnifier icon when the photo is enlarged instead of the default cursor which is an arrow.

Counting on anyone for how to go about this.

Thank you.

ddadmin
03-24-2011, 04:47 AM
Sure, try the below modified .js file. You'll need to edit this line to set the .cur file used as the ummagnify image:


cursoroutcss: 'url(magnifyout.cur), -moz-zoom-out',

I can't recall which program I used to create the initial magnify.cur icon, but just do a search for icon editor online to find a suitable one if needed.

427
12-06-2013, 04:02 PM
I'm fairly new to DD, but amazed by the wonderful scripts and support in the forums. I also would like to modify jQuery Image Magnify v1.11 (http://www.dynamicdrive.com/dynamicindex4/imagemagnify.htm) to include the magnifyout cursor, but I'm having difficulty inserting the code provided. Does anyone have an example page or .js file where the two different magnify glasses are functioning? Any help or suggestions would be greatly appreciated.

427
12-12-2013, 05:49 PM
This thread seems to list an 'attachment' file, but it comes up empty (There are no attachments to display).
Does anyone have this particular file... or would ddadmin please post it again?

jscheuer1
12-12-2013, 06:39 PM
It must have been like this (right click and 'Save As'):

5301

427
12-12-2013, 08:11 PM
It must have been like this (right click and 'Save As'):

5301
OUTSTANDING, John... that workz brilliantly! :)

BTW- I did alter one section to function better in IE (as noted in previous posts).
Instead of using:

cursorcss: 'url(magnify.cur), -moz-zoom-in', //Value for CSS's 'cursor' attribute, added to original image
cursoroutcss: 'url(magnifyout.cur), -moz-zoom-out',
zIndexcounter: 100,

I opted for:

cursorcss: 'url(magnify.cur), pointer', //Value for CSS's 'cursor' attribute, added to original image
cursoroutcss: 'url(magnifyout.cur), pointer',
zIndexcounter: 100,

If I'm changing this in error, please educate me.

Many thanx,
427

jscheuer1
12-12-2013, 08:33 PM
BTW- I did alter one section to function better in IE (as noted in previous posts).

Absolutely. That's the part you're supposed to edit. If you had asked me, I would have recommended it be edited that way.

427
12-12-2013, 08:52 PM
No need to apologize... you have been a fantastic resource (especially your replies to the IE issue in other threads).
But this leads to one question (and I honestly mean no ill intent):
If the IE fix is a recommended change, would it make sense to update the js file on the main website?

jscheuer1
12-13-2013, 01:27 AM
It would but I'm not the site owner, nor do I have editorial control over it.

427
12-13-2013, 01:35 AM
Ahhh... understood. Once again, I appreciated all your help today.

fiedore
06-12-2014, 11:11 PM
Hello there! Great work on the script!
I have a slight problem with it, though. When an image is magnified, the horizontal menu overlaps it. You can see it happening on my page here:

http://www.wzch.vel.pl/viewpage.php?page_id=20

Can I somehow force the magnified image to always be on top of everything?

jscheuer1
06-13-2014, 01:38 AM
In jquery.magnifier.js (around line #19), using a plain text editor like NotePad, try changing the z-index counter as shown:


zIndexcounter: 1000,

Save and use that version.

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

fiedore
06-18-2014, 01:53 PM
Works like a charm, thanks a lot!