Есть следующий кусок текста который работает:
$(document).ready(function() { // Ждём загрузки страницы
$(".image").click(function(){ // Событие клика на маленькое изображение
var img = $(this); // Получаем изображение, на которое кликнули
var src = img.attr('src'); // Достаем из этого изображения путь до картинки
$("body").append("<div class='popup'>"+ //Добавляем в тело документа разметку всплывающего окна
"<div class='popup_bg'></div>"+ // Блок, который будет служить фоном затемненным
"<img src='"+src+"' class='popup_img' />"+ // Само увеличенное фото
"</div>");
$(".popup").fadeIn(800); // Медленно выводим изображение
$(".popup_bg").click(function(){ // Событие клика на затемненный фон
$(".popup").fadeOut(800); // Медленно убираем всплывающее окно
setTimeout(function() { // Выставляем таймер
$(".popup").remove(); // Удаляем разметку всплывающего окна
}, 800);
});
});
});
Все отлично работает, но есть одно но...данный код подразумевает, что мы будем кликать на само изображение с классом image...А что если у меня следующая структура:
<div class="col-md-3 col-sm-4 col-xs-6 gallery_iner p0">
<img src="/images/gallery/gl-1.jpg" class="image" alt="">
<div class="gallery_hover">
<h4>Bolt Apartments</h4>
<a href="#">Увеличить</a>
</div>
</div>
Т.е само изображение перекрывает див внутри которого есть ссылка. И мне нужно что бы код срабатывал при клике на href. Как нужно написать правило, что бы сработало?! Саму структуру html менять нельзя, можно только класс добавить к href.
