带 Wordpress 图片的华丽弹出窗口（php 内容）

Question

我的页面内容是动态的 <?php the_content(); ?>，我无法用 html 定义图像的 a class。所以，我添加了 javascript： $('.single-post img').parent('a').addClass("image-popup-no-margins");

虽然一切都在正常加载，但这并没有奏效。有人知道为什么吗？

这是 fiddle：http://jsfiddle.net/casslt07/jujpewz9/

Answer 1

在 anchor 标签后添加 class <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 Preview

Answer 2

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

此外，我发现开发人员有办法通过 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
        }
  });
});

带 Wordpress 图片的华丽弹出窗口（php 内容）

Magnific Popup with Wordpress Image (php content)

javascript

php

wordpress

magnific-popup