Javascript error var a = {undefined}

I ran into the same problem just now. A very quick work-around is to edit the javascript file: cloud-zoom.1.0.2.js.

Comment out line 337: eval('var a = {' + $(this).attr('rel') + '}');
Change line 338 to this: relOpts = {}

The drawback to doing this is it disables your ability to configure options on the image element itself when using the 'rel' attribute (eg. rel="adjustX: 10, adjustY:-4" will no longer work). You'll just have to set the options in javascript.

Hope this helps anyone out who happened upon this issue in a google search like I did.

Here's a slightly better version. It fixes the error mentioned, allows you to use your rel options, and doesn't use the evil eval function. This is more like the way this should have been done in the first place, IMO.

Replace lines 337 and 338 with this::

relOpts = $.parseJSON('{' + ($(this).attr('rel') || '') + '}');

The only drawback to this is that rel must now be valid JSON (after the addition of the enclosing braces), instead of merely valid JS. That means you'll have to use double-quotes, and quote your keynames.

I'm using cloud-zoom 1.0.3 and jquery-1.8.2.js.

Cloud-zoom
I've gone ahead and modified line 337/8 with relOpts = $.parseJSON('{' + ($(this).attr('rel') || '') + '}'); which gets me past the undefined error. But now, I get the error below.

JQuery

if ( window.JSON && window.JSON.parse ) {
return window.JSON.parse( data );
}

Error: JSON.parse: expected property name or '}'
this is what data print out: Invalid JSON: {useZoom: 'zoom1', smallImage: 'http://test.pojjo.com/media/catalog/product/cache/1/thumbnail/9df78eab33...'}

Any suggestions on how to fix this? you can view the error on http://test.pojjo.com/products/vv/vvs.html in debug mode.

The drawback to doing this is it disables your ability to configure options on the image element itself when using the 'rel' attribute (eg. rel="adjustX: 10, adjustY:-4" will no longer work). You'll just have to set the options in javascript.

Please help me, as I'm very new to java,html etc (web development). How to set up options in javascript instead of rel?

Hi jakimany. You should be able to add a script to the page, select an element by id ("imgOne" for example), call CloudZoom, and pass it the options you want. Notice the missing ',' (comma) after the last key/value option (important for some browsers, if I recall correctly).

<script>
$(document).ready(function(){
    $('#imgOne').CloudZoom({
        tintColor: "#900",
        tintOpacity: 0.30,
        zoomFlyOut: false,
        lensClass: ""
    });
});
</script>

Does this exist in both 1.0.2 and 1.0.3 of Cloud Zoom?

Is the issue if you use the rel="" attribute to configure it?