如何把模態圖像插入圖像插入從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