CODEWITHSUNDEEP
javascriptphpcsswordpress
Paty Rizk
Paty Rizk

Reputation: 17

How to put modal image to image insert from Wordpress content in a post?

How to put a modal image to images in a post inserted throw WordPress when i create a post.

How can I control the image insert in the article and put custom JavaScript and CSS how can I do it for WordPress website??

back-end pic

preview of the page

but it cant access the content of 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

Upvotes: 1

Views: 930

Answers (1)

TriForce
TriForce

Reputation: 415

Ok, u need to detect images from wordpress first, i assume u have them in a container, so u need add an ID to the image container. (also u can use a class or anything, but u need identify the image container)

in the document ready u need use a code something like this:

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

You can see the complete code i already made for u (including an example css).

Click here: https://jsfiddle.net/stptaj9h/23/

Note: Dont forget to include all lightbox libraries (js and css), in this case: lightgallery.css, lightgallery.js, lg-fullscreen.js and lg-thumbnail.js

Upvotes: 1

Related Questions