jQuery Loupe and Click События

Question

В настоящее время я использую плагин loupe для увеличения большой организационной картины, которая настроена как карта изображений. Обычно, когда пользователь щелкает часть этой карты изображений, они перенаправляются, к сожалению, я не могу найти метод, который позволит лупе отвечать пользователю, щелкающему ссылку на карте изображений. Любой совет будет принята с благодарностью!

Спасибо!

Answer 1

Я не знаком с этим конкретным плагином, но вы не можете просто прикрепить свой собственный click обработчик события?

Учитывая эту разметку (на основе демонстрации в репозитории GitHub плагина):

<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>

Вы можете прикрепить обработчик кликов следующим образом:

$(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!');
    });
});

Отредактировано, чтобы добавить, что если вы работаете с картой изображения, вы можете просто прикрепить обработчик события щелчка к <area> элементы, что-то вроде этого:

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

Answer 2

Если вы хотите, чтобы лупа перешла к родительскому тегу привязки к исходному тегу img, попробуйте это, если это не сработает, добавьте класс ко всем исходным изображениям и добавьте в селектор перед img.

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

Answer 3

Это старый вопрос, но ответ довольно прост:

Просто прикрепите слушатель события к классу .loupe

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