Блог

Главная - Вопросы по программированию - Галерея ACF показывает первое изображение и открывает лайтбокс по щелчку

Галерея ACF показывает первое изображение и открывает лайтбокс по щелчку

#php #wordpress #gallery #advanced-custom-fields #lightbox

#php #wordpress #Галерея #дополнительно-пользовательские поля #Лайтбокс

Вопрос:

Я пытаюсь создать страницу архива, чтобы показать некоторые реализации, все из которых имеют галерею с несколькими изображениями. Я использую 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 }
    } ?>

Комментарии:

1. Просто выведите пустые ссылки для всех, кроме первого изображения. Затем должна быть предоставлена функциональность лайтбокса, при этом они фактически ничего не отображают.

2. $images = get_field(‘realisatie_beelden’,$post_id); передайте здесь идентификатор записи, чтобы вы могли получить значение поля и попробовать

Ответ №1:

Благодаря комментарию я нашел решение, которое работает для меня. Я показываю изображение только для первого элемента, остальные ссылки остаются пустыми.

 <?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 }
    } ?>