如何把模态图像插入图像插入从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

好吧，u需要从WordPress的第一检测图像，我认为u有他们在一个容器中，所以你需要在图像容器中添加一个ID。 （也u可以使用一类或任何东西，但你需要识别图像容器）的文件准备ü需要使用代码这样的事情在

：

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