如何将模态图像放入从帖子中的Wordpress内容插入图像？

Question

当我创建帖子时，如何在插入的帖子中将模态图像放入 WordPress 中。

如何控制文章中的图像插入并放置自定义 JavaScript 和 CSS 如何为 WordPress 网站执行此操作？

但它无法访问wordpress的内容

   $("#myModal .post_content img").each(function(){

    $("#myModal p").wrap('<div class="lightgallery"></div>');


    $(this).preprend('<a href="">
        <img data-sub-html="'.get_post(get_post_thumbnail_id())->post_excerpt.'" class="slider-image-fullscreen" data-src="'.get_the_post_thumbnail_url($postid,'full').'"  src="'.get_template_directory_uri().'/images/Magnifier.png" style="position:absolute; height:25px; width:25px;">
        </a>');

});

enter image description here

Answer 1

好的，你需要先从wordpress检测图像，我假设你将它们放在容器中，所以你需要在图像容器中添加一个ID。 （你也可以使用一个类或任何东西，但你需要识别图像容器）

在文档准备就绪中你需要使用这样的代码：

//This is the container which contains the images inserted by wordpress
$("#lightgallery img").each(function(){ //search all images inside

    //get the imgs url
    var imgSrc = $(this).attr("src"); 

    //put the image inside a div
    $(this).wrap('<div class="myImage"></div>'); 

    //adds the button to launch the lightbox
    $(this).parent().prepend('<a href="'+imgSrc+'">View</a>'); 

    //adds the button to launch the lightbox (include thumbnail)
    //$(this).parent().prepend('<a href="'+imgSrc+'">View <img src="'+imgSrc+'"></a>'); 

});

//load gallery after images get converted to links
$("#lightgallery").lightGallery({ //this is the parent container of imgs
    selector:'a', //this is the button to launch the lightbox
    thumbnail:false //if u want use thumbs change it to true, so u need include an image inside the button container to get detected as thumb, in this case inside the "a", u can "uncomment" the hidden line above to try it
});

您可以看到我已为您制作的完整代码（包括示例css）。

点击此处：https://jsfiddle.net/stptaj9h/23/

注意：不要忘记包括所有灯箱库（js和css），在这种情况下：lightgallery.css，lightgallery.js，lg-fullscreen.js和lg-thumbnail.js