open multiple images from one thumbnail in custom wordpress gallery

Question

I made a custom gallery option for my theme using Advanced Custom Fields Plugin for WP. It lets the user upload images to a custom page which on clicking opens a lightbox to show the full-sized image. What I want to do now is open a gallery of images using just one thumbnail. The only thumbnail showing on the page will be one that gives the user an idea of what is inside.Any help would be appreciated.

Answer 1

You can either do it the conventional way (create a list of thumbnails linked to full-size images and display using something like Fancybox) and hide all but one of the thumbnails (see Fancybox FAQ), although that's not good for bandwidth if the gallery is going to have more than a handful of images; or you could use the thumnbail to launch a modal window and pull in the gallery from there. So the thumbnail would open a template file in a modal window like this:

<a href="lightbox.php?galleryID=1" rel="fancybox" />

Then lightbox.php can take the galleryID from the URL and create the gallery in whatever style you see fit.

Answer 2

I know this is a bit dated, but I had been tearing my hair out looking for the same thing and finally got it figured out. Thought I'd share.

Using ACF and the Easy FancyBox plugin for WordPress, I created the following query (for my purposes I'm using a custom post type, but obviously this would work for any kind of post).

<?php
     $my_query = new WP_Query( array( 
         'post_type'        => 'YOUR-CUSTOM-POST-TYPE', 
         'posts_per_page'   => 15, ) ); 
                while ( $my_query->have_posts() ) { 
                    $my_query->the_post();
                    $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($my_query->ID), 'full' );
                    $url = $thumb['0']; 
                    $images = get_field('gallery', $my_query->ID);
?>
                    <a href="<?php echo $url; ?>" rel="gallery-<?php echo $post->ID; ?>"><?php the_post_thumbnail('thumbnail'); ?></a>
                    <div class="fancybox-hidden">
                        <?php if( $images ) {
                                foreach( $images as $image ) { ?>
                                    <a href="<?php echo $image['url']; ?>" rel="gallery-<?php echo $post->ID; ?>"><img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" title="<?php echo $image['title']; ?>"/></a>   
                        <?php } } ?>
                    </div>
                
<?php } ?>

The auto-gallery feature needs to be disabled under the Easy FancyBox settings (Admin>Media) in order for the rel= to be taken into account. Of course thumb sizes, etc can be modified to suit your needs.

Hope this helps someone else!

cheers,

-jennyb