Reputation: 321
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
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