Thessa Verbruggen
Thessa Verbruggen

Reputation: 321

ACF gallery show first image and open lightbox on click

I'm trying to create an archive page to show some realisations, which all have a gallery with multiple images. I use ACF to create a gallery and the Simple Lightbox plugin to create the lightbox. I found an example on how to combine both plugins and it's close to what I need, but I can't figure the rest out myself.

Now all images from the gallery are showing, I only need the first image to show and when you click the image I want to open the image in lightbox and have the possibility to go through the gallery this way.

What I have so far:

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

Upvotes: 0

Views: 2118

Answers (1)

Thessa Verbruggen
Thessa Verbruggen

Reputation: 321

Thanks to a comment, I found a solution that works for me. I only display an image for the first element, the other links are left empty.

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

Upvotes: 0

Related Questions