Примерът, който ще дам е със стандартен блок за галерия в WordPress, но подходът може да се използва и в други случаи. Целта ни е да покажем първите девет снимки, като върху деветата покажем и броя скрити снимки. Тъй като използваме скрипт за разглеждане на картинките в пълния им размер, искаме естествено скритите снимки да са видими за него. Нещо такова:

Ключовият момент е използването на CSS Grid Layout за оформяне на галерията. Чрез използването на подходящи селектори можем да разположим всички елементи след да кажем деветия в последната клетка от решетката, като по този начин ограничим броя видими снимки.

.blocks-gallery-grid { 
  display: grid; 
  grid-auto-rows: auto; 
  grid-gap: 2em; 
  width: 100%;
}

.columns-3 .blocks-gallery-grid  {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.columns-3 .blocks-gallery-grid > :nth-child(9),
.columns-3 .blocks-gallery-grid > :nth-child(9) ~ * {
  grid-column: -2/-1;
  grid-row: 3;
}

Примерът е за галерия с по три снимки на ред, и след като искаме да са видими първите девет, следователно с три видими реда снимки. Първите двe правила задават решетката за галерията, основния трик е в третото правило. То казва, че деветия и всички елементи след него трябва да се разположат на третия ред от решетката в последната колона. За съжаление CSS Grid не ни позволява да посочваме автоматично създадените редове с отрицателни индекси когато не сме указали точния брой редове в решетката. Ако използвате инспектора във Firefox за да видите как браузъра описва решетката на галерията, ще забележите, че с индекс -1 е означена линията над първия ред. Поради тази причина се налага да посочим реда експлицитно.

До тук добре, но как да покажем броя скрити снимки? И как да направим така, че потребител, използващ само клавиатурата, да се ориентира какво се случва докато се придвижва с Tab през иначе скритите снимки? За да покажем броя скрити снимки ще използваме брояч в CSS, с който да преброим скритите снимки и да покажем стойността му в псевдо-елемент в последната снимка. И ще направим видима снимката, която в момента е на фокус, като я „повдигнем“ над останалите скрити снимки със z-index.

.blocks-gallery-grid { 
  counter-reset: remaining-items;
}

.columns-3 .blocks-gallery-grid > :nth-child(9),
.columns-3 .blocks-gallery-grid > :nth-child(9) ~ * {
  counter-increment: remaining-items;
}

.columns-3 .blocks-gallery-grid > :nth-child(9) ~ :last-child::after {
  content: "+" counter(remaining-items);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba( 0, 0, 0, .75 );
  color: #fff;
  font-size: 3em;
}

.columns-3 .blocks-gallery-grid > :nth-child(9) ~ * {
  pointer-events: none;
}

.columns-3 .blocks-gallery-grid > :nth-child(9):focus-within,
.columns-3 .blocks-gallery-grid > :nth-child(9) ~ *:focus-within {
  position: relative;
  z-index: 2;
  pointer-events: all;
}

.columns-3 .blocks-gallery-grid > :last-child:focus-within::after {
  opacity: 0;
}

Освен, че показваме брояч, в горните правила изключваме обработването на събития от мишката (или докосвания ако екрана на устройството реагира на тях) за скритите картинки. Но когато дадена картинка е на фокус и съответно е над останалите, бихме искали да реагира на събитията, и за последната снимка искаме да скрием брояча, за да е видима.

С това галерията общо взето е завършена, можем да добавим подобни правила и за галерии с две, четири или повече снимки на ред, или да променим броя видими снимки за различни екрани.

Етикети: wordpress, галерия