The following steps assume you are using standard WordPress galleries. If you are using the NextGen Gallery plugin, please follow the steps here.
This may work best if you first go to Settings > Media and set the option Auto-gallery to All in one Gallery. Other settings may work to but… YMMV (your mileage may vary).
1. Open your post for editing and insert the first image in your post content. Choose “Image size: Thumbnail” (or Medium) in the block Settings and set the link to “Media File” (not Attachement Page) in the context menu.
This image will serve as the basic gallery thumbnail, opening the full gallery in FancyBox.
Then continue with either the Easy method or the Alternatif “hands-on” method.
Easy method:
2a. Insert an image gallery block: select each image image you want in that gallery except the first one, added in step 1. Set the following gallery block options in the block Settings (gear icon, right side):
- Link to: Media file
- Image size: Thumbnail (for page load times)
- Additional CSS classes: fancybox-hidden (under the Advanced section)
See “Gallery settings” image on the right.
Now save your post and check the public result. If it’s not exactly what you expect, or if you wish to show multiple light box galleries o the same page, consider the Alternatif method below for more control.
Alternatif “hands-on” method:
Instead of using WP core gallery block (or shortcode) you can choose a more “hands-on” approach, allowing you to set a specific “rel” attribute. This will, for example, make it compatible with an Auto-gallery setting “None” or image Auto-detect switched off. Or serve other situations.
2b. In the inserted image context menu (three vertical dots, in the toolbar visible when selecting the image block) select “Edit as HTML”. Then find the link tag and add a class="fancybox"rel="mygallery" to it. It might look like this:
<figure class="wp-block-image size-thumbnail"><a class="fancybox" rel="mygallery" href="https://your.site/path/to/fullimg1.jpg"><img src="https://your.site/path/to/fullimg1-150x150.jpg" alt="My Gallery" class="wp-image-14522"/></a></figure>3b. Insert an HTML block and paste the following example there:
<a class="fancybox" rel="mygallery" href="https://your.site/path/to/fullimg2.jpg"></a>
<a class="fancybox" rel="mygallery" href="https://your.site/path/to/fullimg3.jpg"></a>
<a class="fancybox" rel="mygallery" href="https://your.site/path/to/fullimg4.jpg"></a>Replace the URLs with the full address of the second and following gallery images. 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.
You can now switch the image block view back to “Edit visually” via the same context menu and save your post.
You can use another “rel” value, just make sure they match for all image links that you wish to show on one gallery. If you add a second gallery, use a different “rel” attribute value for that second group of images.