Advanced Custom Fields - Fancybox Slideshow on Clicking a Thumbnail

Question

I'm trying to create a fancybox slideshow that pops up when you click on one thumbnail. I'm using Advanced Custom Fields with Gallery Field.

This is what I have;

        <?php 
        $images = get_field('gallery'); 
        $image_1 = $images[0]; 
        ?>    
        <a href="<?php echo $images['url']; ?>" rel="fancybox">
       <img src="<?php echo $image_1['url']; ?>" /></a>

Unfortunately, nothing happens when you click on the image…

Any leads?

Thanks!

Answer 1

As Pranita said you should be using a for loop for generating the gallery.

If this display more thumbnails than you want, you can simply build your HTML/CSS so that every thumbnail, except the first, is hidden.

Use this, from the official documentation, and customize it to your needs.

<?php $images = get_field('gallery'); 

if( $images ) : ?>
    <div id="carousel" class="flexslider">
        <ul class="slides">

        <?php foreach( $images as $image ): ?>
            <li>
                <img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
            </li>
        <?php endforeach; ?>

        </ul>
    </div>
<?php endif; ?>

Answer 2

The problem is you have used $images['url'] where images is a multidimensional array. It has to be $image_1['url'];

Simply use for loop if you want every image. Else if you want only one image then use

<a href="<?php echo $images[0]['url']; ?>" rel="fancybox">
       <img src="<?php echo $images[0]['url']; ?>" /></a>