Reply To: Get next/prev image url in gallery array

• thePixelPixie

• February 18, 2016 at 6:26 am

In case anyone else needs similar code, this is for a CSS-only pop-over modal window that grabs the Featured Image of the custom post type, as well as the gallery images.

<?php $args = array(
	'post_status' => 'publish',
);

$query = new WP_Query( $args );

if ($query->have_posts()) {
	$id = get_the_ID();
	$thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), $size = 'full' );
	$url = $thumb['0'];
	$alt = get_post_meta($thumb_id, '_wp_attachment_image_alt', true);
	$images = get_field('additional_product_images');
	?>
	
	<section id="gallery">
		<section class="item top">
			<a href="#<? echo get_post_thumbnail_id() ?>">
				<img src="<?=$url?>">
			</a>
		</section>
		
		<?php if( $images ): foreach( $images as $image ): ?>
		
		<section class="item">
			<a href="#<?php echo $image['id']; ?>">
				<img src="<?php echo $image['sizes']['dnf-prod-thumb']; ?>" />
			</a>
		</section>
		
		<?php endforeach;
			
			endif;
		?>
	</section>
	
	<!-- lightbox container hidden with CSS -->
	<div class="lightbox" id="<? echo get_post_thumbnail_id() ?>">
		<div class="box">
			<a class="close" href="">X</a>
			
			<div class="content">
				<img src="<?=$url?>">
				
				<?php if( $images ): ?>
				
				<!-- Next Image Button -->
				<a class="next" href="#<?php echo $images[0]['id'] ?>">next</a>
				<div class="clear"></div>
				
				<?php endif; ?>
			</div>
		</div>
	</div>
	
	<?php if( $images ): foreach( $images as $key => $image ): ?>
	<div class="lightbox" id="<?php echo $image['id']; ?>">
		<div class="box">
			<a class="close" href="">X</a>
			
			<div class="content">
				<img src="<?php echo $image['sizes']['large']; ?>" />
				
				<!-- Previous Image Button -->
				<?php if(isset($images[$key - 1])){ ?>
				<a class="prev" href="#<?php echo $images[$key - 1]['id'] ?>">prev</a>
				<?php }
					
					else { ?>
					<a class="prev" href="#<? echo get_post_thumbnail_id() ?>">prev</a>
					<?php } ?>
					
				<!-- Next Image Button -->
				<?php if(isset($images[$key + 1])){ ?>
				<a class="next" href="#<?php echo $images[$key + 1]['id'] ?>">next</a>
				<?php } ?>
				<div class="clear"></div>
				
			</div>
		</div>
	</div>

	<?php endforeach;
		
	endif; 
?>

And the corresponding CSS…

#gallery a {
	text-decoration: none;
}

#gallery .item {
    width: 46%;
    height: auto;
    overflow: hidden;
    float: left;
    margin: 5px;
}

#gallery .item.top {
	width: 96%;
}

#gallery .item a {
    overflow: hidden;
}

#gallery .item a img {
    height: 100%;
    align-self: center;
}

.lightbox {
    /** Hide the lightbox */
    opacity: 0;

    /** Apply basic lightbox styling */
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: 100%;
    top: -100%;
    left: 0;
    color: #333333;
    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out;
}

.lightbox:target {
    /** Show lightbox when it is target */
    opacity: 1;
    outline: none;
    top: 15%;
}

.lightbox .box {
  	width: -webkit-min-content;
  	width: -moz-min-content;
  	width: min-content;
  	max-height: 85%;
    min-width: 500px;
 	margin: auto;
    padding: 10px 20px;
    background-color: #FFF;
    box-shadow: 0px 1px 26px -3px #777777;
}

.lightbox .title {
    margin: 0;
    padding: 0 0 10px 0px;
    border-bottom: 1px #ccc solid;
    font-size: 22px;
}

.lightbox .content {
    display: block;
    position: relative;
    width: 95%;
}

.lightbox .close {
    display: block;
    float: right;
    text-decoration: none;
    font-family: "Lato", Helvetica, Arial, sans-serif;
    font-size: 22px;
    color: #858585;
}

.clear {
    display: block;
    clear: both;
}

.lightbox .content .desc {
    z-index: 99;
    bottom: 0;
    position: absolute;
    padding: 10px;
    margin: 0 0 4px 0;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    font-size: 17px;
    opacity: 0;
    transition: opacity ease-in-out 0.5s;
}
    
.lightbox .content:hover .desc {
    opacity: 1;
}

.lightbox .next,
.lightbox .prev,
.lightbox .close {
    display: block;
    text-decoration: none;
    font-family: "Lato", Helvetica, Arial, sans-serif;
    font-size: 22px;
    color: #858585;
}

.prev {
    float: left;
}

.next,
.close {
    float: right;
}