Magnific Popup с изображением Wordpress (содержание php)

Question

Содержание моей страницы динамично <?php the_content(); ?>и я не могу определить изображение a класс с HTML. Итак, я добавил с помощью JavaScript: $('.single-post img').parent('a').addClass("image-popup-no-margins");

Хотя все загружается правильно, это не сработало. Кто-нибудь знает почему?

Вот скрипка: http://jsfiddle.net/casslt07/jujpewz9/

Answer 1

Переместите код 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
        }
    });

 });

Answer 2

Кроме того, я обнаружил, что разработчик имеет способ реализовать это с 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
        }
  });
});

Answer 3

Добавить класс после 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>

Jsfiddle Предварительный просмотр