事件不会在初始加载时触发 [英] Event does not trigger on the initial load
a>
此问题与同位素有关.在@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指出，rangingComplete存在问题.页面初始加载时不会触发事件rangingComplete.
同位素是在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:
<?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.js的加载顺序.试过了 将其包含在标题中，紧接在body标签关闭之前，以及 很快.
-
在线搜索类似问题(未找到)
-
将
$container重命名为$grid -
更改addClass将影响哪些元素
可以在此处找到该页面.
您有可行的解决方案或任何想法吗?
在Android Landscape上拉伸的图像:
您应该尝试做的一件事(这也与您的第一个问题有关)，因为加载图像时要使用请参阅此处.我不明白为什么如果在@media查询中，您为什么需要使用javascript添加类"imgArranged"?
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'
});
});
附录
问题是您两次加载了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>
This is a continuation from my other question regarding Changing media screen makes div overlay
This problem is associated with Isotope. With help from @Robin Carlo Catacutan I have the following 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;
});
});
I want you to focus on the section where it's supposed to add class when transition is finished:
$container.on( 'arrangeComplete', function( event, filteredItems ) {
$(".grid figure img").addClass("imgArranged");
});
According to @Robin Carlo Catacutan there is a problem with arrangeComplete. The event arrangeComplete doesn't trigger on the initial load of the page.
The isotope is being loaded in the beginning of 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' );
I post all my php within the latest posts in case you find anything suspicious:
<?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; ?>
However, this is the most important part which is directly related to the question:
<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>
Not sure if relevant, but as summary of what I am using related to this problem:
- Wordpress
- Isotope
- Bootstrap
What I have tried:
Changing the order of where the isotope.js is being loaded. Tried including it in the header, right before the closing of body tag and so on.
Searching online for a similiar problem (not found)
Renaming
$containerto$gridChanging what element the addClass is going to affect
The page can be found here.
Do you have a working solution or any ideas?
Streched images on Android Landscape:
One thing you should try (and this is related to your first question as well), since your loading images, is to use imagesloaded.js. This will allow all images to load before isotope is initiated which will eliminate overlaps See here. I'm not understanding why do you need to add the class "imgArranged" using javascript if it is in a @media query?
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
The problem is you are loading jQuery twice, 2 different versions. You need to pick one. If you pick 2.1.4, you don't use query-migrate
This loads first:
<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>
This loads after:
<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>
这篇关于事件不会在初始加载时触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
