Using repeater to create multiple fancybox gallery items

• milonq

• December 27, 2014 at 6:01 am

hey friends,

currently trying to get a fancybox based gallery connected to ACF.
Currently the goal is when i create posts i will be able to post the thumbnail photo and when pressing the photo itself the fancybox will open and should provide now multiple photos in a gallery type which i inserted through ACF repeater / subfield photo. the fancybox javascript recognizes the photo elements that refer together by the data-fancybox-group value i chose $post->ID to set all photos of the post together. but currently when i press the thumbnail photo fancybox pops up but only showing the thumbnail photo.

you can have a look: http://www.milonquayim.com

thanks for the help

<?php foreach( $categories as $category ): ?>
    
    <?php $args = array( 'category' => $category->term_id, orderby ); ?>

    <?php $posts = get_posts( $args ); ?>
    
    <?php foreach( $posts as $post ): setup_postdata( $post ); ?>
        
        <div class="brick <?php echo $category->slug; ?>" >
            
            <?php $data_fancybox_group = get_field( 'data-fancybox-group' ); ?>
            
            
            
    	 	<a href="<?php echo wp_get_attachment_url( get_post_thumbnail_id( $post->ID ) ); ?>" alttitle="TITLE1" class="fancybox" data-fancybox-group="<?php echo $post->ID ?>" >
                <?php the_post_thumbnail( '360x360c' ); ?>
            </a>
    	 	
    	 <?php foreach( $data_fancybox_group as $fancy ): ?>
    	 	
    	 	   <a href="<?php echo $fancy['image']['sizes']['360x360c']; ?>" alttitle="TITLE2" class="fancybox" data-fancybox-group="<?php echo $post->ID ?>">
        	 	  
        	 	  
    	 	   </a>
    	 	
    	 	<?php endforeach; ?>
    	 	
    	</div>
	
	<?php endforeach; ?>

Bildschirmfo....png

Bildschirmfo....png

• James

• April 6, 2016 at 6:39 am

Hi @milonq

Kindly have a look at this article which achieves the exact same thing you are trying.

http://www.elliotcondon.com/creating-an-image-gallery-with-advanced-custom-fields/

Hope this helps.