Question

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

虽然一切都正常加载，但这不起作用。有谁知道为什么？

这里是小提琴：http://jsfiddle.net/casslt07/jujpewz9/

Answer 1

在设置Magnific Popup的代码之前移动addClass代码，它应该可以工作。

$(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

在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 Preview

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图像的Magnific弹出窗口（php内容）

3 个答案: