Results 1 to 10 of 10

Thread: jQuery Image Magnify v1.11 Help please

  1. #1
    Join Date
    Jun 2013
    Location
    Westminster, MD
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question jQuery Image Magnify v1.11 Help please

    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
    Last edited by kennyd4110; 06-21-2013 at 01:14 AM. Reason: Changed Prefix

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,069
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

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

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    kennyd4110 (06-18-2013)

  4. #3
    Join Date
    Jun 2013
    Location
    Westminster, MD
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    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?

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,069
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    /* 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:

    Code:
    /* 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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. The Following User Says Thank You to jscheuer1 For This Useful Post:

    kennyd4110 (06-18-2013)

  7. #5
    Join Date
    Jun 2013
    Location
    Westminster, MD
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    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.

  8. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,069
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    That's an invalid path.

    Change:

    Code:
    url(www.boltonhooks.com/magnify.cur), pointer
    to (absolute path):

    Code:
    url(http://www.boltonhooks.com/magnify.cur), pointer
    or (network path):

    Code:
    url(/magnify.cur), pointer
    You can even use the relative path:

    Code:
    url(magnify.cur), pointer
    But that will only work with pages in the same folder as the magnify.cur file.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. The Following User Says Thank You to jscheuer1 For This Useful Post:

    kennyd4110 (06-19-2013)

  10. #7
    Join Date
    Jun 2013
    Location
    Westminster, MD
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    to (absolute path):

    Code:
    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!

  11. #8
    Join Date
    Jul 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hello,

    I have been using your jQuery Image Magnify v1.11 for a few years now and have been very happy with it thank you. I am using it on one website through GoDaddy
    on their web hosting with “Classic Hosting Linux” and it works just fine. I started another website a few weeks ago again with GoDaddy but their web hosting has
    been upgraded to “cPanel” with new accounts. All I did was cut and paste files and for some reason the zoom feature does not work at all. Can you please help me
    out here and tell me what I’m missing? It just seems too easy.

    Thanks

  12. #9
    Join Date
    Jun 2013
    Location
    Westminster, MD
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    krewsinn, I'm not any expert here by any means...but my host uses cPanel as well as most others so I doubt that's your problem. Are you sure the .js and .cur are uploaded on the new server via FTP? I am not sure how you would "paste" them there, but it may be possible.

  13. #10
    Join Date
    Jul 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by kennyd4110 View Post
    krewsinn, I'm not any expert here by any means...but my host uses cPanel as well as most others so I doubt that's your problem. Are you sure the .js and .cur are uploaded on the new server via FTP? I am not sure how you would "paste" them there, but it may be possible.
    Thank you for your response. I went ahead and downloaded the (2) files again and it works. I really don't understand what happened maybe a fat finger or something but it does work now so that's a good thing. Thanks again.

Similar Threads

  1. jQuery Image Magnify - magnify.cur in IE 10
    By geotso in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 04-09-2013, 02:29 PM
  2. Resolved jQuery Image Magnify v1.11
    By rexi in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 05-12-2012, 10:01 PM
  3. jQuery Image Magnify v1.11 help
    By armasmike in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 06-17-2011, 04:07 PM
  4. Resolved jQuery Image Magnify v1.11
    By rexi in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 05-25-2011, 01:43 PM
  5. Jquery image magnify, magnify onmouseover
    By azoomer in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 10-15-2009, 09:27 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •