用于Wordpress的Magnific Popup发布身体图像

Question

我正在研究一个WordPress主题，我想知道是否有一种方法可以在Magnific Popup中打开图像，这些图像由编辑器插入到帖子体上。因此，当我点击前端时，我通过TinyMCE编辑器在帖子中插入的任何图像都将在Magnific Popup上打开。

Answer 1

这个问题有几种不同的方法。我在下面概述了几个。

选项1

过滤内容并应用可以使用Magnific Popup定位的HTML属性。

我们可以take a cue from this article并利用the_content挂钩。

  

“the_content”过滤器用于过滤帖子的内容   从数据库中检索之后和​​打印之前   屏幕。

的functions.php

将以下内容添加到functions.php。

function prefix_content_gallery( $content ) {
    global $post;

    $pattern     = "/<a(.*?)href=('|\")(.*?).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i";
    $replacement = '<a$1href=$2$3.$4$5 rel="lightbox" title="'.$post->post_title.'"$6>';
    $content     = preg_replace( $pattern, $replacement, $content );

    return $content;
}
add_filter( 'the_content', 'prefix_content_gallery' );

JS

$('.entry-content').magnificPopup({
    type: 'image',
    delegate: '[rel="lightbox"]',
    gallery: {
        enabled: true
    }
});

View Example

选项2

另一种选择是有选择地将CSS类分配给应该是图像库一部分的链接。

1. 添加媒体发布并在“附件显示设置”下将“链接到”设置为“媒体文件”。



1. 将图像插入帖子后编辑图像。



1. 将CSS类添加到包装图像的链接。



JS

$('.entry-content').magnificPopup({
    type: 'image',
    delegate: '.entry-gallery',
    gallery: {
        enabled: true
    }
});

View Example