Как добавить код снаружи блока?
Вопрос необычный. На сайте для картинки нужно сделать открывающуюся картинку при клике. Но проблема в том, что картинка на которую нужно сделать ссылку не понятно как формируется.
Есть <div class="ad-image-wrapper"></div> но в нем пусто. В инспекторе показывает в нем есть <img src="images/for_man/1/1.jpg" width="375" height="338"> как она создается не пойму. Нет ни файлов js ни в коде нет script Можно как то с помощью JS или jQuery задать чтобы к <div class="ad-image-wrapper"></div> находя в нем images/for_man/1/1.jpg присваивалось <a href="images/for_man/1/1_big.jpg " data-lightbox="image-1" data-title="My caption"> <div class="ad-image-wrapper"></div> </a> |
Цитата:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="ad-image-wrapper">
<img src="images/for_man/1/1.jpg" alt="img">
</div>
<div class="ad-image-wrapper">
<img src="images/for_man/1/2.jpg" alt="img">
</div>
<script>
$('.ad-image-wrapper').has('img').each(function(){
var src = $(this).find('img').attr('src').replace(/\.jpg/, '_big$&');
$(this).wrap( '<a href="'+src+'" data-lightbox="image-1" data-title="My caption"></a>');
});
</script>
</body>
</html>
|
скрипт разместите перед </body> или оберните в
$(function(){
//код
})
;если не сработает ищите подгруздку изображений аяксом, код запускайте колбеком. |
Еще можно отследить изменение блока, в котором должно появляться изображение с помощью MutationObserver.
Также можно каждые несколько миллисекунд проверять в блоке наличие изображения до момента его появления. |
| Часовой пояс GMT +3, время: 03:47. |