Techiio-author
Started by Dixon MurrayNov 5, 2021

Open
metaslider in bootstrap modal jumpy

0 VIEWES 0 LIKES 0 DISLIKES SHARE
0 LIKES 0 DISLIKES 0 VIEWES SHARE

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">&times;</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

You must be Logged in to reply
Techiio-logo

Techiio is on the journey to build an ocean of technical knowledge, scouring the emerging stars in process and proffering them to the corporate world.

Follow us on:

Subscribe to get latest updates

You can unsubscribe anytime from getting updates from us
Developed and maintained by Wikiance
Developed and maintained by Wikiance