Wie man modales Bild zum Bild setzt, fügen Sie Inhalt von Wordpress in einen Beitrag ein?

Question

Wie ein modales Bild auf Bilder in einem Beitrag eingefügt werden werfen WordPress wenn ich einen Beitrag erstellen.

Wie kann ich steuern, um die Bildeinsatz in dem Artikel und setzen individuelle JavaScript und CSS wie kann ich es Website für Wordpress tun ??

aber es kann nicht den Inhalt von 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

Ok zugreifen, u brauchen Bilder von Wordpress zunächst zu erkennen, nehme ich an u sie haben In einem Container müssen Sie dem Image-Container eine ID hinzufügen. (U kann auch eine Klasse oder etwas verwenden, aber u müssen das Bild Behälter identifizieren)

im Dokument bereit u einen Code so etwas wie dieses benötigen:

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

Sie können den vollständigen Code sehe ich schon für dich gemacht (einschließlich eines Beispiels css).

Klicken Sie hier: https://jsfiddle.net/stptaj9h/23/

Hinweis: Vergessen Sie nicht, alle Leuchtkasten Bibliotheken (js und css) enthalten, in diesem Fall: lightgallery.css, lightgallery.js, lg-fullscreen.js und lg-thumbnail.js