Mauerwerk/Isotop neu initialisieren nach Drücken von href #/

Question

Ich habe Probleme mit Mauerwerk, das nicht initialisiert wurde. Meine Divs haben unterschiedliche Höhen, daher benutze ich Masonry und Isotope, damit sie korrekt angezeigt werden. Alle diese divs haben die Klasse .item

Bitte siehe Website: http://www.dokfilm.no/ und nach unten scrollen zu Nyhende.

Durch Drücken entweder Nyhende oder Plus-Symbol. Sie können sehen, dass die divs übereinander geladen werden. Auch sie werden auf den hinteren Teil der Seite geschoben. Dies liegt daran, dass beim Drücken der Verknüpfung Mauerwerk nicht initialisiert wird.

Wenn Sie die Größe der Fenster des Browsers werden Sie sehen, dass Mauerwerk wird reinitilized werden und alle Elemente bewegen sich direkt an die richtigen Positionen.

Das Problem ist, dass Mauerwerk wird nicht durch die folgenden reinitilized werden:

<a href="#/ "title="Artiklar" data-target="#" class="nodec"> 
    <div class="expander"> 
     <?php echo '<h1>' . esc_html__('Nyhende', 'dokfilm') . '</h1>'; ?> 
     <img class="open" src="<?php bloginfo('stylesheet_directory'); ?>/img/plus.png" alt="Open"> 
     <img class="close" src="<?php bloginfo('stylesheet_directory'); ?>/img/minus2.png" alt="Close" /> 
    </div> 
</a> 

Hier mehr PHP ist, wenn nötig. artikler2.php ist wo die Posts geladen werden.

PHP

<div class="clearfix"> 
    <a id="artikler"></a> 
    <section id="artikler" class="section artikler"> 
     <div class="blacktext"> 
      <div class="container"> 
       <div class="col-md-12 solidborderned bittelittpaddingoppned littpaddingned bittelittluft"> 
        <a href="#/ "title="Artiklar" data-target="#" class="nodec"> 
         <div class="expander"> 
          <?php echo '<h1>' . esc_html__('Nyhende', 'dokfilm') . '</h1>'; ?> 
          <img class="open" src="<?php bloginfo('stylesheet_directory'); ?>/img/plus.png" alt="Open"> 
          <img class="close" src="<?php bloginfo('stylesheet_directory'); ?>/img/minus2.png" alt="Close" /> 
         </div> 
        </a> 

        <div id="event-info" class="text littluft"> 
         <div class="row"> 
          <div class="col-md-12">        
           <?php include 'artikler2.php' ?> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </section> 
</div> 

PHP

<div id="isotope-list"> 
     <div class="row"> 
     <?php while ($the_query->have_posts()) : $the_query->the_post(); ?>    
     <div class="item col-md-6 littluft"> 

       <div class="black content grid lefttext maximg littluft"> 
        <a href="<?php the_permalink() ?>"> 
         <?php if (has_post_thumbnail()) { the_post_thumbnail('event_thumb'); } ?> 
        </a> 
        <div class="red padding"> 
         <h2 class="whitetext nomargin"><?php the_title(); ?></h2> 
         <span class="whitetext thin"> 
          <?php the_time('j. F Y') ?> 
         </span><br/> 
         <span class="whitetext thin"> 
          <?php 
           $content = get_post_field('post_content', get_the_ID()); 
           $content = preg_replace('/<[\/]?b>/i', '', $content); 
           $content_parts = get_extended($content); 
           echo $content_parts['main']; 
          ?> 
         </span> 
         <div class="whitelink"><a href="<?php the_permalink() ?>">Les mer</a></div> 
        </div> 
       </div> 
      </a> 

     </div> 
     <?php endwhile; ?> 
     </div> 
    </div> 

PHP Footer

<script src="<?php bloginfo('stylesheet_directory'); ?>/js/masonry.pkgd.min.js"></script> 

<script> 

(function($) { 

    var $container = $('.masonry-container'); 
    $container.imagesLoaded(function() { 
     $container.masonry({ 
      columnWidth: '.item', 
      itemSelector: '.item' 
     }); 
    }); 

    //Reinitialize masonry inside each panel after the relative tab link is clicked - 
    $('a[data-toggle=tab]').each(function() { 
     var $this = $(this); 

     $this.on('shown.bs.tab', function() { 

      $container.imagesLoaded(function() { 
       $container.masonry({ 
        columnWidth: '.item', 
        itemSelector: '.item' 
       }); 
      }); 

     }); //end shown 
    }); //end each 

})(jQuery); 
</script> 

Isotope.js

jQuery(function($) { 

    var $container = $('#isotope-list'); //The ID for the list with all the blog posts 

    $container.imagesLoaded(function() { 
     $container.isotope({ //Isotope options, 'item' matches the class in the PHP 
     itemSelector: '.item', 
     layoutMode: 'masonry' 
    }); 
}); 

Irgendwelche Ideen?

Wir freuen uns von Ihnen zu hören, gelöst

Answer 1

Problem durch eine id auf den Link Hinzufügen. Dann habe ich die Klasse isotope-list durch masonry-container ersetzt. Dann fügte ich eine Funktion in der Fußzeile hinzu, die das Mauerwerk neu lud.

HTML

<a href="#" title="Artikler" data-target="#" data-toggle="tab" class="nodec" id="nyhendeartiklar"> 
    <div class="expander"> 
      <?php echo '<h1>' . esc_html__('Nyhende', 'dokfilm') . '</h1>'; ?> 
      <img class="open" src="<?php bloginfo('stylesheet_directory'); ?>/img/plus.png" alt="Open"> 
      <img class="close" src="<?php bloginfo('stylesheet_directory'); ?>/img/minus2.png" alt="Close" /> 
    </div> 
</a> 



<div id="event-info" class="text littluft"> 
     <div class="row masonry-container"> 
      <div class="col-md-12">        
        <!-- Loop comes here --> 
      </div> 
     </div> 
</div> 

jQuery in der Fußzeile:

$(document).on("click", "#nyhendeartiklar", function() { 
    $container.masonry('reloadItems').masonry(); 
    $container.imagesLoaded(function() { 
     $container.masonry(); 
    }); 
});