Support

Account

Register Login

Home › Forums › Add-ons › Gallery Field › Get next/prev image url in gallery array

Solved

Get next/prev image url in gallery array

  • I’m using a CSS lightbox, and would like to be able to link to the previous and next images in the current array. But I’m not sure how to accomplish this.

    This is the code I’m using right now, in case it’s helpful:

    <?php
$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');

if( $images ): ?>
<section id="gallery">
	<section class="item">
		<a href="#<? echo get_post_thumbnail_id() ?>">
			<img src="<?=$url?>">
		</a>
	</section>
	
	<?php 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; ?>
</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?>">
		</div>
		
		<!-- Previous Image Button -->
		<div class="prev"><?php previous_image_link(); ?></div>
		<!-- Next Image Button -->
		<div class="next"><?php next_image_link(); ?></div>
		<div class="clear"></div>
	</div>
</div>

<?php foreach( $images as $image ): 
	$count = 0;
?>
<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']; ?>" />
		</div>
		
		<!-- Previous Image Button -->
		<div class="prev"><?php if($count - 1) echo $image['url']; ?></div>
		<!-- Next Image Button -->
		<div class="next"><?php next_image_link($count + 1); ?></div>
		<div class="clear"></div>
	</div>
</div>
    
    <?php $count++;
	    endforeach; ?>
    
<?php endif; ?>

  • Hi @brotsky_pixie

    I’m not sure how your code works, but if you want to get the previous or the next image, you can use code like this:

    $images = get_field('gallery_field_name');
if( $images ){
    foreach( $images as $key => $image ){
        if(isset($images[$key - 1])){
            echo "prev:" . $images[$key - 1]['url'];
        }
        echo $image['url'];
        if(isset($images[$key + 1])){
            echo "next:" . $images[$key + 1]['url'];
        }
    }
}

    I hope this helps.

  • This set me on the track I needed. Thank you VERY much!

  • 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;
}
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.