javascript — великолепное всплывающее окно с изображением WordPress (php-контент)
Содержание моей страницы динамично <?php the_content(); ?>и я не могу определить изображение a класс с HTML. Итак, я добавил с помощью JavaScript: $('.single-post img').parent('a').addClass("image-popup-no-margins");
Хотя все загружается правильно, это не сработало. Кто-нибудь знает почему?
Вот скрипка: http://jsfiddle.net/casslt07/jujpewz9/
Решение
Переместите код addClass перед кодом для настройки Magnific Popup, и он должен работать.
$(document).ready(function() {
$('img').parent('a').addClass("image-popup-no-margins");
$('.image-popup-no-margins').magnificPopup({
type: 'image',
closeOnContentClick: true,
closeBtnInside: false,
fixedContentPos: true,
mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from left and right side
image: {
verticalFit: true
},
zoom: {
enabled: true,
duration: 300 // don't foget to change the duration also in CSS
}
});
});
Другие решения
добавить класс после anchor тег <a>
class="image-popup-no-margins"так что код
<a class="image-popup-no-margins" href="http://farm4.staticflickr.com/3721/9207329484_ba28755ec4_o.jpg">
<img class="aligncenter wp-image-1054" src="http://farm4.staticflickr.com/3721/9207329484_ba28755ec4_o.jpg" height="75" width="107">
</a>
Кроме того, я обнаружил, что у разработчика есть способ реализовать это с delegate: 'a'
$(document).ready(function() {
$('.parent-div').magnificPopup({
delegate: 'a',
type: 'image',
closeOnContentClick: true,
closeBtnInside: false,
fixedContentPos: true,
mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from left and right side
image: {
verticalFit: true
},
zoom: {
enabled: true,
duration: 300 // don't foget to change the duration also in CSS
}
});
});