我正在使用WordPress和ACF图库。在每个帖子中,我都有一个带图像的画廊。
我需要从所有画廊获取所有图像并将它们随机播放。
我怎么能做到这一点?
现在我有了这个:
<?php if ( $query->have_posts() ) : ?>
<?php while ( $query->have_posts() ) : $query->the_post();
$images = get_field( 'gallery' );
$size = 'full';
if ( $images ) : ?>
<?php foreach( $images as $image ): ?>
<img class="post-gallery" src="<?php echo $image['url']; ?>">
<?php endforeach; ?>
<?php endif; ?>
<?php if (has_post_thumbnail()) : ?>
<div class="post" style="background-image: url(<?php the_post_thumbnail_url(); ?>);"></div>
<?php endif; ?>
我认为我们需要以某种方式将所有帖子和帖子的画廊放到一个阵列中并随机播放?
更新: js part(Infinite + masonry + imagesLoaded + randomize blocks
var images = $('.container-post .col-50');
for (var i = 0; i < images.length; i++) {
var imageFirst = Math.floor(Math.random() * images.length -1) + 1;
var imageSecond = Math.floor(Math.random() * images.length -1) +1;
images.eq(imageFirst).before(images.eq(imageSecond));
}
var $container = $('.container-post').masonry({
itemSelector: '.container-post .col-50',
});
$container.imagesLoaded().progress( function() {
$container.masonry('layout');
});
var masonry = $container.data('masonry');
$container.infiniteScroll({
outlayer: masonry,
path: '.wp-pagenavi .page',
append: '.container-post .col-50',
scrollThread: 1,
history: false,
hideNav: '.wp-pagenavi',
status: '.page-load-status',
});
度过美好的一天!
答案 0 :(得分:1)
我个人会让PHP做繁重的工作,如你所说,创建一个JS可以循环的混乱数组。例如:
<?php
$collectedImages = [];
if ($query->have_posts()) {
while($query->have_posts()) {
$query->the_post();
$images = get_field('gallery');
$size = 'full';
if ($images === false) {
continue;
}
foreach ($images as $image) {
$collectedImages[] = $image['url'];
}
}
}
shuffle($collectedImages);
foreach ($collectedImages as $image) {
// Render it!
}
?>
更多信息: