Fancybox Slideshow from One Image

• sleepydada

• February 20, 2014 at 12:27 pm

Hi,

So, I figured out how to display only the first images from the gallery.

Now I need to link it to the whole gallery so when I click the thumbnail image a fancybox slideshow of all the images pops ups.

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!

• sleepydada

• February 21, 2014 at 7:02 am

I solved it by using some CSS.

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

			<div id="slideshow_thumb_info">
			<?php echo $image_1['title']; ?><br>
			<?php echo $image_1['caption']; ?>
			</div>

#slideshow_thumb img {
	display:none;
	width:100%;
	height:auto;
}

#slideshow_thumb a:first-of-type img{
	display:block;
}

#slideshow_thumb_info {
	color:black;
	padding-top: 10px;
	font-size: 10px;
	line-height: 12px;

}