Title: FancyBox?
Last modified: August 10, 2017

---

# FancyBox?

 *  Resolved [wddart](https://wordpress.org/support/users/wddart/)
 * (@wddart)
 * [8 years, 9 months ago](https://wordpress.org/support/topic/fancybox-16/)
 * Hello,
    thank you for a good job!
 * If I want to display gallery in eg fancy-box or similar click and zoom environment,
   what I need to do?
 * Thank you!

Viewing 2 replies - 1 through 2 (of 2 total)

 *  Plugin Author [Navneil Naicker](https://wordpress.org/support/users/navzme/)
 * (@navzme)
 * [8 years, 9 months ago](https://wordpress.org/support/topic/fancybox-16/#post-9405240)
 * Hi [@wddart](https://wordpress.org/support/users/wddart/)
    There is a plugin 
   called “[Easy FancyBox](https://wordpress.org/plugins/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; ?>
       ```
   
 *  Thread Starter [wddart](https://wordpress.org/support/users/wddart/)
 * (@wddart)
 * [8 years, 9 months ago](https://wordpress.org/support/topic/fancybox-16/#post-9406189)
 * Thank you!

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘FancyBox?’ is closed to new replies.

 * ![](https://ps.w.org/navz-photo-gallery/assets/icon-128x128.png?rev=2607741)
 * [ACF Photo Gallery Field](https://wordpress.org/plugins/navz-photo-gallery/)
 * [Support Threads](https://wordpress.org/support/plugin/navz-photo-gallery/)
 * [Active Topics](https://wordpress.org/support/plugin/navz-photo-gallery/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/navz-photo-gallery/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/navz-photo-gallery/reviews/)

 * 2 replies
 * 2 participants
 * Last reply from: [wddart](https://wordpress.org/support/users/wddart/)
 * Last activity: [8 years, 9 months ago](https://wordpress.org/support/topic/fancybox-16/#post-9406189)
 * Status: resolved