I have a WordPress web page wherein I positioned the content of a post inner a modal. The page labored great simplest, due to the fact there has been a lot of statistics on the web page, it took a very long time to load. So, I determined to populate the modal while the modal receives unfolded. I discovered a way to use ajax to populate the modal. Best, now, the slideshow within the modal makes it honestly jumpy. The content material turned into now not jumpy while I used to be loading all the modals at the web page at the identical time. I assume the slideshow snapshots loaded the use of lazy load or some I do now not understand that a good deal about jquery. I'm sure there is an answer. Here is the code that populates the modal
<script type='text/javascript'>
$(document).ready(function(){
$('.userinfo').click(function(){
var post_id = $(this).data('id');
$.ajax({
url: '/ajax/',
type: 'post',
data: {post_id: post_id},
success: function(response){
$('#p111').html(response);
}
});
});
});
</script>
Here is the code on the WordPress template that generates page /ajax/
<?php
/**
* Template Name: Ajax
*/
if(isset($_POST['post_id']) && !empty($_POST['post_id'])){
$post_id = $_POST['post_id'];
}
?>
<div class="modal-dialog ">
<div id="modal_mask"></div>
<div class="modal-content">
<div class="modal-body "><div class="container-fluid">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<div class="row">
<div id="projectcontent" class="col-xs-12 no_pad">
<?php
echo '<div class="alignnormal">'.do_shortcode('[metaslider title="'.$post_id.'"]').'</div>';
$post_object = get_post( $post_id );
echo $post_object->post_content;
?>
</div>
</div>
</div></div>
</div>
</div>
<?php
wp_footer();
exit;
?>
0 Replies