Question

这是我关于Changing media screen makes div overlay

的其他问题的延续

此问题与Isotope相关联。在@Robin Carlo Catacutan的帮助下，我有以下isotope.js：

jQuery(function($) {

  var $container = $('#isotope-list'); //The ID for the list with all the blog posts
  $container.isotope({ //Isotope options, 'item' matches the class in the PHP
    itemSelector: '.item',
    layoutMode: 'masonry'
  });

  // Add class when transition is finished
  $container.on( 'arrangeComplete', function( event, filteredItems ) {
    $(".grid figure img").addClass("imgArranged");
  });

  $container.on( 'arrangeComplete',
  function( event, filteredItems ) {
    console.log( 'Isotope arrange completed on ' +
      filteredItems.length + ' items' );
  }
);

  //Add the class selected to the item that is clicked, and remove from the others
  var $optionSets = $('#filters,#filters-undercat'),
    $optionLinks = $optionSets.find('a');

  $optionLinks.click(function() {
    var $this = $(this);
    // don't proceed if already selected
    if ($this.hasClass('selected')) {
      return false;
    }
    var $optionSet = $this.parents('#filters');
    $optionSets.find('.selected').removeClass('selected');
    $this.addClass('selected');

    //When an item is clicked, sort the items.
    var selector = $(this).attr('data-filter');
    $container.isotope({
      filter: selector
    });

    return false;
  });

});

我希望您专注于过渡完成时应该添加课程的部分：

  $container.on( 'arrangeComplete', function( event, filteredItems ) {
    $(".grid figure img").addClass("imgArranged");
  });

根据@Robin Carlo Catacutan的说法，arrangeComplete存在问题。事件arrangeComplete不会在页面的初始加载时触发。

在functions.php：

的开头加载同位素

//Isotope
function add_isotope() {
    wp_register_script( 'isotope', get_template_directory_uri().'/js/isotope.pkgd.min.js', array('jquery'),  true );
    wp_register_script( 'isotope-init', get_template_directory_uri().'/js/isotope.js', array('jquery', 'isotope'),  true );
    wp_enqueue_script('isotope-init');
}

add_action( 'wp_enqueue_scripts', 'add_isotope' );

我发布了最新帖子中的所有内容，以防您发现任何可疑内容：

<?php 

$args = array(
    'post_type' => (array( 'foto', 'video', 'web' )),
    'posts_per_page' => '-1',
    'post_taxonomy' => 'any',
);

$the_query = new WP_Query($args); 

?>
<?php if ( $the_query->have_posts() ) : ?>
    <div id="isotope-list">
        <?php while ( $the_query->have_posts() ) : $the_query->the_post(); 
            $termsArray = get_the_terms( $post->ID, "category");
            $termsString = "";
                foreach ( $termsArray as $term ) { 
                    $termsString .= $term->slug.' ';
                }
        ?>               
        <div class="<?php echo $termsString; ?> item col-md-4"> 
            <div class="content grid lefttext">
                <figure class="effect-lily">
                    <?php if ( has_post_thumbnail() ) { the_post_thumbnail('frontpage_thumb'); } ?>
                    <figcaption>
                        <div>
                            <h2 class="uppercase regular whitetext textshadow nomarginbottom"><?php the_title(); ?></h2>
                            <p><span class="whitetext thin textshadow"><?php echo(types_render_field( "produkt", array( 'raw' => true) )); ?> / <?php echo(types_render_field( "produsert", array( 'raw' => true) )); ?></span></p>
                        </div>
                        <a href="<?php the_permalink() ?>" rel="bookmark" class="smoothtrans">Se prosjekt</a>
                    </figcaption>           
                </figure>     
            </div> 
        </div>
        <?php endwhile;  ?>
    </div>
<?php endif; ?>

然而，这是与问题直接相关的最重要的部分：

<div class="<?php echo $termsString; ?> item col-md-4"> 
     <div class="content grid lefttext">
          <figure class="effect-lily">
          <?php if ( has_post_thumbnail() ) { the_post_thumbnail('frontpage_thumb'); } ?>
              <figcaption>
                  <div>
                       <h2 class="uppercase regular whitetext textshadow nomarginbottom"><?php the_title(); ?></h2>
                       <p><span class="whitetext thin textshadow"><?php echo(types_render_field( "produkt", array( 'raw' => true) )); ?> / <?php echo(types_render_field( "produsert", array( 'raw' => true) )); ?></span></p>
                  </div>
                  <a href="<?php the_permalink() ?>" rel="bookmark" class="smoothtrans">Se prosjekt</a>
               </figcaption>            
          </figure>     
     </div> 
</div>

不确定是否相关，但是作为我使用的与此问题相关的摘要：

WordPress的
Isotope
自举

我尝试了什么：

更改isotope.js的加载顺序。试着将它包含在标题中，正好在关闭body标签之前等等。
在线搜索类似问题（未找到）
将$container重命名为$grid
更改addClass将影响的元素

可以找到页面here。

您是否有工作解决方案或任何想法？

Android横向上的Streched图片：

Answer 1

你应该尝试一件事（这也与你的第一个问题有关），因为你加载的图像是使用imagesloaded.js。这将允许在同位素启动之前加载所有图像，这将消除重叠See here。我不明白为什么你需要添加课程＆＃34; imgArranged＆＃34;使用javascript，如果它在@media查询中？

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'
 });
 });

<强> ADENDUM

问题是你正在加载jQuery两次，两个不同的版本。你需要选一个。如果选择2.1.4，则不要使用query-migrate

首先加载：

 <script src="http://www.vekvemedia.no/wp-content/themes/vekvemedia/js/jquery-2.1.4.min.js"></script>    
  <script src="http://www.vekvemedia.no/wp-content/themes/vekvemedia/js/collection.js"></script>
  <script src="http://www.vekvemedia.no/wp-content/themes/vekvemedia/js/less.js"></script>
  <script src="http://www.vekvemedia.no/wp-content/themes/vekvemedia/js/imagesloaded.js"></script>
  <script src="//use.typekit.net/xti5sne.js"></script>

此后加载：

<script type='text/javascript' src='http://www.vekvemedia.no/wp-includes/js/jquery/jquery.js?ver=1.11.2'></script>
<script type='text/javascript' src='http://www.vekvemedia.no/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<script type='text/javascript' src='http://www.vekvemedia.no/wp-content/themes/vekvemedia/js/isotope.pkgd.min.js?ver=1'></script>
<script type='text/javascript' src='http://www.vekvemedia.no/wp-content/themes/vekvemedia/js/isotope.js?ver=1'></script>

事件不会在初始加载时触发

1 个答案: