How to show the first few thumbnails and hide the rest in the Oxygen Gallery?

Categories:
Tags:
,

Suppose you have a task to create a gallery that displays only three thumbnails, and when you open full-size images in a lightbox, you should be able to view the entire gallery of 10 images.

To do this for the Oxygen Gallery, add the following code to your stylesheet:

.oxy-gallery-item:nth-child(3) ~ .oxy-gallery-item {
display:none
}

Moreover, instead of a piece of code :nth-child(3), you can specify the required number of displayed thumbnails.

Also, if you use multiple galleries on the site, then you may need to specify the selector more specifically to refer to a specific gallery (by specifying the gallery ID):

#_gallery-4-426 .oxy-gallery-item:nth-child(3) ~ .oxy-gallery-item {
display:none
}

How to show the first few thumbnails and hide the rest in the Oxygen Gallery?

Important! I do not recommend using this method for creating large galleries, because hiding the thumbnails this way will still be in the source code and using too many can negatively affect page load speed. Use this to create galleries with no more than 10-15 images in total.

For example, this gallery has 6 images, but only three thumbnails are shown:

arrow-up