Image Zoom effect using Cloud Zoom jQuery plugin

Question

I am trying to apply cloud zoom on a single image as in the below Fiddle

http://jsfiddle.net/7HDbz/

But it does not seems to be working. Someone have a look at this. Here is another fiddle with working effects

http://jsfiddle.net/tuHuZ/1/

The original plugin usage is here.... http://www.professorcloud.com/mainsite/cloud-zoom.htm

Answer 1

Problems with your first fiddle (the non-working one) include:

• No space between the src and class attribute on your <a> tag
• Using ' single quotes instead of " double-quotes for constructing the <a> tag
• Use of prop where attr should be used. The former is only for properties where the value is irrelevant, such as disabled .
• General Tip: Use variable names that make sense -- eg use src for the image source instead of x (which could mean anything, and in fact suggests a number)
• General Tip: You should avoid having multiple $(this) calls. Instead, set a local variable $this as shown

Here's the working corrected version: http://jsfiddle.net/6dR2k/ .