One thumbnail to open a complete gallery slideshow

The following steps assume you are using standard WordPress galleries. If you are using the NextGen Gallery plugin, please follow the steps here.

First, go to Settings > Media and set the option Auto-gallery to All in one Gallery.

1. Open your post for editing and insert the first image thumbnail in your post content (linking to the images file, not page) to serve as the basic gallery thumbnail.

Then continue with either method A or method B.

Method A.

2. Next, insert an HTML block and paste the following code there:

<a href="https://your.site/path/to/fullimg.jpg"></a>

3. Replace the URL with the full address of the second gallery image. You can find this URL in your Media Library by opening the desired image and click the button “Copy URL to clipboard” on the side.

4. Repeat this for each subsequent gallery image.

Method B.

2. Next, insert an HTML block and place the following code to start a hidden div containing all the other images that should only be visible in FancyBox:

<div class="fancybox-hidden">

3. Right after that insert either one of these two blocks:

  • An image gallery block: select each image image you want in that gallery except the first one, added in step 1. Set the gallery option “Link to: Media file” and make sure to select the smallest thumbnail size (for page load times).
  • Or a shortcode block where you enter: [gallery link="file"].
    NOTE: when using the gallery shortcode, and if the gallery thumbnail is attached to the post, it will be shown a second time when flipping through the gallery in FancyBox. If you do not want that, use an image that is not attached to the post as gallery thumbnail.

4. Close the hidden div with the following code on a new line:

</div>