#tiled gallery

[kenneturner]

Love Should Manifest Itself . . .

Love Should Manifest Itself . . .

Yellow Cactus Blossoms — Tiled Gallery by kenne Suffering occurs when we want other people to love us in the way that we imagine we want to be loved, and not in the way that love should manifest itself — free and untrammeled, guiding us with its force and driving us on. — Paulo Coelho

View On WordPress

[lvl99dotcom]

Change Jetpack Tiled Gallery Carousel to Fancybox 3

Jetpack is a great tool for adding some extra key functionality to your WordPress blog, but it — like other great software — has some flawed decisions and some resulting drawbacks.

Most people are probably happy with the included “carousel” plugin (it’s actually more a “lightbox”, but whatever) but personally it displays more information than I like and it is also restricted to navigating through only the photos within each individual gallery, not all the photos in all the galleries on the same page.

With that in mind, I really like Fancybox and v3 has added some swish upgrades with mobile, speed and more. I figured there must be a way to swap the Carousel for the more superior Fancybox.

First things first, ensure that the carousel functionality is enabled on your blog in the WordPress admin section at Jetpack > Settings > Writing > Media:

This might seem counterintuitive, however the Tiled Gallery plugin has a conditional when rendering each tiled gallery item that checks if the carousel plugin is enabled or not. We need it to be enabled to then override the carousel-image-args partial template to be loaded.

In your theme directory, create a new file (I created a folder called partials and created a file called tiled-gallery-carousel-image-args.php within it). In that file, copy and paste this text:

In your theme’s functions.php file you’ll need something like below. We’ll need to change the location of the partial to load, to ensure that the image will trigger the Fancybox plugin when it’s clicked:

And then in your theme’s Javascript file, something along these lines to ensure Fancybox is attached to image items with the data-fancybox="gallery" attribute:

Et voila.