Last update: June 8, 2021

How to create a justified gallery

A justified gallery fits your images into rows of the same height, without the need to crop.

In Oxygen, we will turn our masonry style gallery :

into a justified style gallery:

Step 1

First, go to download the file fjGallery.min.js and enqueue it.
Or you can simply add the CDN link, with Advanced Scripts (aff link), as it's easier and faster :
https://unpkg.com/flickr-justified-gallery@1/dist/fjGallery.min.js

Step 2

Create a new gallery, add a new class (ex. justified-gallery), add your images, and set the layout to masonry.

Step 3

Add a Code Block , and paste this JS code :

fjGallery(document.querySelectorAll('.justified-gallery'), {
    itemSelector: '.oxy-gallery-item',
	gutter:10,
	rowHeight:250
});

Just replace the class name by yours, if you used another one.
The gutter is the gap in pixel, between each images.
The rowHeight, is the size of the rows.

For more options, check the official page : https://github.com/nk-o/flickr-justified-gallery

Tips

You will probably see the gallery 'jumping' from the masonry style to the justified style when you open the page.
It doesn't look great, so you can hide the gallery first (just set it with an opacity of 0) and add this code instead :

fjGallery(document.querySelectorAll('.justified-gallery'), {
    itemSelector: '.oxy-gallery-item',
    gutter: 10,
    rowHeight: 250,
    onJustify: function() {
        const opa = document.querySelector('.justified-gallery');
        opa.style.opacity = '1';
    },
});

There are probably some other methods but this one seems to work fine.

Weird gap problem

When we set the gutter to zero, we can still see a little gap between each images (it's visible with Chrome but not with Firefox).
Just write gutter:-1 instead.

 

closealign-justifychevron-downcaret-up