Question

I have a plugin which creates a lens over an image, but cannot make the image clickable when underneath the lens.

I created this on jsfiddle to help illustrate the problem:
http://jsfiddle.net/F9GT5/2/

I need to be able to make the image clickable to then perform a set of actions.

I have seen it done on some sites such as this here: http://www.starplugins.com/cloudzoom

 $('#myCloudZoom').bind('click',function(){       // Bind a click event to a Cloud Zoom instance.
        var cloudZoom = $(this).data('CloudZoom');   // On click, get the Cloud Zoom object,
        cloudZoom.closeZoom();                       // Close the zoom window (from 2.1 rev 1211291557)
        $.fancybox.open(cloudZoom.getGalleryList()); // and pass Cloud Zoom's image list to Fancy Box.
        return false;
    });

This problem has been driving me nuts for a couple of days now, with the cloudzoom plugin, it seems like they are clicking through the lens to the image below. But as shown in the code above, the click even is bound to the image, but when you inspect element, you get the lens over the top of the image.

Has anyone any ideas on how to tackle this problem?

Answer 1

Using your plugin, store the selector for the image in the div somehow:

//Inside the plugin, creating the lens; add attribute for image
$("<div>").data('image', this)
//Then bind a click event to the div to trigger a click on the image:
   .click(function () {
      $(this).data('image').trigger('click');
   });