ajaxwordpressmagnific-popupowl-carousel

All owl Carousel breaks after closing the Magnific popup content using ajax


i m creating a single page WP theme, actually theme is created BY some one else i am converting it to WP. all works fine but when a post from blog section is viewed and closed all the carousels breaks on the site. post opens in magnific popup.

Links:

<a href="<?php the_permalink(); ?>" class="ajax-popup-link"></a>

Magnific:

$('.ajax-popup-link').magnificPopup({ type: 'ajax', closeOnBgClick: false }); 

Full code where I am using the popup:

<?php
$bl_args = array(
  'post_type' => 'post',
  'orderby' => 'date',
  'order' => 'DEC',
);
$counter = 0;
$bl_query = new WP_Query( $bl_args );

if ( $bl_query->have_posts() ) {
  while ( $bl_query->have_posts() ) {
    $bl_query->the_post();
    
    if ( $counter%4 == 0 ) {            
      echo '<div class="blog">';
      echo '<div class="row">';
    } // open before every fourth item
                          
    echo '<div class="col-md-6">'; 
    
    ?>
      <a href="<?php the_permalink(); ?>" class="ajax-popup-link">
        <?php the_post_thumbnail('blog-thumb'); ?>
      </a>
    <?php
    echo '<div class="row">';
    echo '<div class="col-sm-2"><span><span>';
    the_time('j');
    echo '</span>';
    the_time('F Y');
    echo '</span>';
    echo '</div><!-- .col-sm-2 -->';
    echo '<div class="col-sm-10">';
    echo '<h4>';
    
    ?>
      <a href="<?php the_permalink(); ?>" class="ajax-popup-link">
        <?php echo get_the_title(); ?>
      </a>
    <?php
    
    echo '</h4>';
    the_excerpt();
    echo '</div><!-- .col-sm-10 -->';
    echo '</div><!-- .row -->';
    echo '</div><!-- .col-md-6 -->';
  
    if ( $counter%4 == 3 ) { 
      echo '</div><!-- .row -->'; 
      echo '</div><!-- .blog -->';
    } // close after each block of four or after last item
    $counter++;
  }
}
/* Restore original Post Data */
wp_reset_postdata();

Solution

  • The problem was because with popup, the styles and scripts were loaded again. I removed wp_head() and wp_footer() from the popup and everything works great now.