时间戳

首页 > 解决方案 > ACF 画廊显示第一张图片并在点击时打开灯箱

php - ACF 画廊显示第一张图片并在点击时打开灯箱

问题描述

我正在尝试创建一个存档页面来展示一些实现，它们都有一个包含多个图像的画廊。我使用 ACF 创建图库，使用 Simple Lightbox 插件创建灯箱。我找到了一个关于如何结合两个插件的例子，它接近我需要的，但我自己无法弄清楚其余的。

现在画廊中的所有图像都在显示，我只需要显示第一张图像，当您单击图像时，我想在灯箱中打开图像并有可能以这种方式浏览画廊。

到目前为止我所拥有的：

<?php if ( have_posts() ) {
        while ( have_posts() ) { the_post(); ?>
            <article id="realisatie-<?php the_ID(); ?>" <?php post_class(); ?> style="background-image: url(<?php echo $images[0] ?>);">
                <?php
                $images = get_field('realisatie_beelden');
                $image_1 = $images[0];
                if( $images ) { ?>
                <div class="realisatie__gallery" >
                    <?php foreach( $images as $image ) {
                        $content = '<a class="gallery_image" href="'. $image .'">';
                        $content .= '<img src="'. $image .'" alt="'. $image .'" />';
                        $content .= '</a>';
                        
                        if ( function_exists('slb_activate') ) {
                            $content = slb_activate($content);
                        }
                        ?>
                    <?php } ?>
                </div>
                <?php } ?>
            </article>
        <?php }
    } ?>

标签： phpwordpressgalleryadvanced-custom-fieldslightbox

解决方案

感谢评论，我找到了适合我的解决方案。我只显示第一个元素的图像，其他链接为空。

<?php if ( have_posts() ) {
        while ( have_posts() ) { the_post(); ?>
            <article id="realisatie-<?php the_ID(); ?>" <?php post_class(); ?>>
                <?php
                $images = get_field('realisatie_beelden');
                $image_1 = $images[0];
                if( $images ) { ?>
                    <?php
                    $i = 0;
                    
                    foreach( $images as $image ) {
                        if ($i >= 1) {
                            $content = '<a href="'. $image .'"></a>';
                        } else {
                            $content = '<a href="'. $image .'">';
                            $content .= '<img src="'. $image .'" />';
                            $content .= '</a>';

                            $i++;
                        }
                        
                        if ( function_exists('slb_activate') ) {
                            $content = slb_activate($content);
                        }

                        echo $content;
                        ?>
                    <?php } ?>
                <?php } ?>
            </article>
        <?php }
    } ?>

推荐阅读