jQuery Loupe and Click Events

Question

I'm currently using the loupe plugin to zoom in on a large organizational picture that is set up as an image map. Normally when a user clicks a portion of this image map they are redirected, unfortunately I can't find a method that will allow loupe to respond to a user clicking a link on an image map. Any advice would be greatly appreciated!

Thanks!

Answer 1

If you want loupe to go to the anchor tag parent to the original img tag, then try this, if that doesn't work, add a class to all the original images, and add to the selector before img.

$('.loupe').click(function(){   
      $("img[src='"+$(this).find('img').attr('src')+"']").parent()[0].click();
});

Answer 2

I'm not familiar with that particular plugin, but can't you simply attach your own click event handler?

Given this markup (based on the demo at the plugin's GitHub repo):

<div>
    <a class="demo" href="path/to/some/url">
        <img src="path/to/image" width="191" height="240" />
    </a>
    <img class="demo" src="path/to/image" width="191" height="240" />
</div>

You can attach a click handler like this:

$(function(){
    $('a.demo').on('click', function(e){
        // prevent the link from going anywhere (if that's what you want)
        e.preventDefault();

        // do something else...
        alert('The Loupe link was clicked!');
    });
});

Edited to add that if you're working with an image map, you can simply attach a click event handler to the <area> elements, something like this:

$('area').on('click', function(e){
    // stuff here
});

Answer 3

This is old question but answer is quite simple:-

Just attach an event listener to the class .loupe

$('.loupe').on('click', function (e) {
  e.preventDefault();
  alert('The Loupe link was clicked!');
});