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

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:

facebooklinkdeintwitter

Subscribe to get latest updates

You can unsubscribe anytime from getting updates from us
Copyright techiio.com @2020 Kolkata, India
made with by Abhishek & Priyanka Jalan
Copyright techiio.com @2020
made with by Abhishek & Priyanka Jalan