[javascript] jQuery Magnifier

Comments

1. 

   Sam Balette, 11 months ago:

   I have implemented your magnifier and seems to be working OK except that upon loading the first time the magnifiers seems to be displaced upwards. You can see this on this link:

   http://allpopart.com/product_info1m.php?cPath=150_154&products_id=734

   As soon as the page is cached the magnifier goes to its right position.

2. 

   Dieter, 10 months ago:

   Hi, thanks for your feedback.

   I tried to follow your link but getting a 404 now. What browser & environment are you testing in?

   Thanks

3. 

   Dieter, 9 months ago:

   Hi Sam,

   I've noticed this happens in IE when you don't add a width/height on your img tag.

   Let me know if you still have problems.

4. 

   CrashPlan.nl online backup , 4 months ago:

   jquery-magnifier has 2 bugs in our sample implementation located at http://www.crashplan.nl/online-backup/probeer-gratis-14-dagen.html#4

   The bugs are: 1. the positioning of the lens is about 200 pixels below the image 2. no content is shown in the magnifier square (only 1 px black border with trasnparent background)

5. 

   CrashPlan.nl online backup , 4 months ago:

   And in IE7 the lens is even located further down the image, it even adds another screenheight (or 3) of extra white space below the content.

6. 

   Dieter, 4 months ago:

   Thanks for letting me know, I'll have a look when I find the time.

   For now, you could try to make sure your html is valid (your ID's are numbers which is not ok) and I noticed you have the magnifier on the second image as well, while it results to http://www.crashplan.nl/images/crashplan-pro-client/win/nl/installatie/5-maak-uw-account-aan-791.png

   I know this shouldn't be breaking it, but you never know - I've implemented this on only one site so far without problems.

7. 

   Dieter, 4 months ago:

   @Crashplan: here's what I found out:

   Somehow the codaBubble code you're using doesn't like the magnifier. If you move the magnifier code below the bubble code, it all works.

   I'll have a look if this has anything to do with my code rather than the bubble code.

8. 

   Dieter, 4 months ago:

   It doesn't seem to happen when including other plugins (like 'cycle'), but does with codaBubble - so for some reason they must conflict.

9. 

   CrashPlan.nl online backup , 4 months ago:

   Oops, sorry we didn't validate the xhmtl page yet. a id=... are converted to a name=....

   Now the page validates without errors, the magnifier is still displayed approximately 200 pixels below, without showing an image. In other words no change.

   The jquery.magnifier.js code was already below codabubble.js: script type="text/javascript" src="../js/jquery.codabubble.js" script type="text/javascript" src="../js/jquery.magnifier/js/jquery.magnifier.js"

   Or isn't this what you mean with 'If you move the magnifier code below the bubble code, it all works.'?

10. 

    Dieter, 4 months ago:

    No, you are initiating the magnifier code before the codabubble code.

    Remove

    jQuery(function($) { $('a[rel*=magnify]').magnify(); });

    from the magnifier code and where you add the bubble code, add this

    $('a[rel*=magnify]').magnify();

    to the last line, so it gets instantiated AFTER the bubble code.

11. 

    Dieter, 4 months ago:

    So you'll get this:

    $('.coda_bubble').codaBubble(cbopts);

    $('a[rel*=magnify]').magnify();

12. 

    Dieter, 4 months ago:

    I think it might have to do with the coda bubble doing quite drastic changes to the page, so if you instantiate the magnifier first, it does calculations based on a page unchanged by the bubble code yet - thus getting it wrong.

13. 

    CrashPlan.nl online backup , 4 months ago:

    Moving $('a[rel*=magnify]').magnify(); from /init.js to /jquery.magnifier.js wasn't such a good idea after all.

    Now $('a[rel*=magnify]').magnify(); is in the page itself, below $('.coda_bubble').codaBubble(cbopts); it works.

    Now it is interesting what happens if the page dynamically shows and hides elements, changing the distance between the top and the image, that should be magnified...

14. 

    Dieter, 4 months ago:

    I don't think it's a matter of moving the code from init to the main one, but more a matter of the offset that changes caused by the codabubble (or any other code that changes the position after the magnifier is already instantiated).

Sorry, comments are closed for this entry.

You still want to ask something? Use the contact page or e-mail me at dieter@dio5.com.

Earlier Future