Hi @wddart
There is a plugin called “Easy FancyBox” which you can download and install on your WordPress websites. Once done, you can go ahead and use the following code in your templates to get the Fancybox to work.
Please note you might have to do few customization in this code to match your website e.g. Image sizes and full image size
<?php
//Get the images ids from the post_metadata
$images = acf_photo_gallery('gallery_images', $post->ID);
//Check if return array has anything in it
if( count($images) ):
//Cool, we got some data so now let's loop over it
foreach($images as $image):
$id = $image['id']; // The attachment id of the media
$title = $image['title']; //The title
$caption= $image['caption']; //The caption
$full_image_url= $image['full_image_url']; //Full size image url
$full_image_url = acf_photo_gallery_resize_image($full_image_url, 1024, 768); //Resized size to 262px width by 160px height image url
$thumbnail_image_url= $image['thumbnail_image_url']; //Get the thumbnail size image url 150px by 150px
$url= $image['url']; //Goto any link when clicked
$target= $image['target']; //Open normal or new tab
$alt = get_field('photo_gallery_alt', $id); //Get the alt which is a extra field (See below how to add extra fields)
$class = get_field('photo_gallery_class', $id); //Get the class which is a extra field (See below how to add extra fields)
?>
<div class="col-xs-6 col-md-3">
<div class="thumbnail">
<?php if( !empty($url) ){ ?><a href="<?php echo $url; ?>" <?php echo ($target == 'true' )? 'target="_blank"': ''; ?>><?php } ?>
<a href="<?php echo $full_image_url; ?>" class="fancybox">
<img src="<?php echo $thumbnail_image_url; ?>" alt="<?php echo $title; ?>" title="<?php echo $title; ?>">
</a>
<?php if( !empty($url) ){ ?></a><?php } ?>
</div>
</div>
<?php endforeach; endif; ?>