Cannot read property 'left' of undefined

[Dandu-Venkata-Ravi-Varma]

I use this markup:

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

[Mottie]

Hi @ravivarma414!

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" src="images/1.jpg" alt="example" title="Image" class=" img-polaroid">
    </div>
    <div class="large">
        <img class="image" src="images/1.jpg" alt="example" title="Image" class=" img-polaroid">
    </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.

[Mottie]

I'm guessing this issue has been resolved. If not, please feel free to post a message here for me to reopen it and I will try to assist you further.

[brunonrosa]

I'm getting this error Cannot read property 'left' of undefined.

I'm trying to apply the plugin on a container of a svg element. Whenever a pass the mouse over the error accurs.

<div id="container"><svg></svg></div>