不同样式的最后一个缩略图在高级自定义字段专业画廊

Question

我使用带有lighbox的Advance Custom Fields pro创建了一个图像库，并将其限制为仅显示4个缩略图，这非常有效。当有人点击任何缩略图时，图库就会在灯箱中打开，并显示其中的所有图像。

现在我想为第4个缩略图使用不同的css样式，但不知道如何做到这一点。

这是我的代码：

<?php
$images = get_field('menu_gallery');
$image_1 = $images[0];
if( $images ) { ?>
<ul class="gal-grid">

<?php
$i = 0;

foreach( $images as $image ) {

if ($i >= 5) {
$content = '<li class="gal-grid-zom">';
$content = '<a class="gallery_image" href="'. $image['url'] .'"></a>';
$content .= '</li>';
} else {
$content = '<li class="gal-grid">';
$content = '<li class="gal-grid"><a class="gallery_image" href="'. $image['url'] .'">';
$content .= '<img class="gallery-zom" src="'. $image['sizes']['thumbnail'] .'" alt="'. $image['alt'] .'" />';
$content .= '</a>';
$i++;
}
$content .= '</li>';
if ( function_exists('slb_activate') ) {
$content = slb_activate($content);
}
echo $content;
?>
<?php } ?>
<?php } ?>  </ul>

有人能在这个问题上帮我吗？

Answer 1

您可以在foreach循环中添加$key：

foreach( $images as $key => $image ) {
if( $key === 3 ) {
// it will show the specific <li> for the 4th iteration.
<li class="fourth-grid">The Image</li>
} else {
<li class="gal-grid">The image</li>
}
}