带有Wordpress图像的放大弹出菜单(php内容）

Magnific Popup with Wordpress Image (php content)

本文关键字：菜单 php 内容 Wordpress 图像 放大 带有      更新时间：2023-09-26

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

尽管一切都正常加载，但这并没有起作用。有人知道为什么吗？

小提琴在这儿：http://jsfiddle.net/casslt07/jujpewz9/

将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
        }
    });
 });

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

Jsfidle预览

此外，我发现开发人员有一种方法可以用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
        }
  });
});
相关文章：