Anything Zoomer plugin, Cannot read property 'left' of undefined

Question

I use this markup:

<div id="zoom">
    <div id="small">
        <img id="image1" src="images/1.jpg" alt="example" title="Image" class=" img-polaroid">
    </div>
    <div id="large">
        <img id="image2" src="images/1.jpg" alt="example" title="Image" class=" img-polaroid">
    </div>
</div>

And I make the call this way:

jQuery(document).ready(function(){
    jQuery("#zoom").anythingZoomer()
});

My jQuery version is: 1.8.3

It says Cannot read property 'left' of undefined when I hover on an Image,

https://github.com/CSS-Tricks/AnythingZoomer

Please help.

Do you call `jQuery("#zoom").anythingZoomer({ expansionSize: 30, speedMultiplier: magnifymultiplier, });` after the DOM finished loading? — Kilian Stinson, May 24 '13 at 12:03
Did you tried wrapping that code inside the .ready() http://api.jquery.com/ready/\ function?? — Ligth, May 24 '13 at 12:10

score 1 · Answer 1 · answered May 24 '13 at 19:23

1

This could be an issue with existing JS plugins or could be due to some version conflict of jQuery. Try to create a new blank page and run your code there. The best way is to use the code given in demo file of plugin.

answered May 24 '13 at 19:23

Faizan

1,847
8
40
63

score 1 · Answer 2 · answered Apr 02 '15 at 12:50

The plugin is looking for class names, so switch the ID's of the markup inside the zoom to classes:

<div id="zoom">
    <div class="small">
        <img class="image img-polaroid" src="images/1.jpg" alt="example" title="Image">
    </div>
    <div class="large">
        <img class="image img-polaroid" src="images/1.jpg" alt="example" title="Image">
    </div>
</div>

Also, the img's both have an ID of image, they should be unique. I've changed them to a class name above, but if you need the ID for something, then make them unique.

Anything Zoomer plugin, Cannot read property 'left' of undefined

2 Answers2