Примерът, който ще дам е със стандартен блок за галерия в 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; }
Освен, че показваме брояч, в горните правила изключваме обработването на събития от мишката (или докосвания ако екрана на устройството реагира на тях) за скритите картинки. Но когато дадена картинка е на фокус и съответно е над останалите, бихме искали да реагира на събитията, и за последната снимка искаме да скрием брояча, за да е видима.
С това галерията общо взето е завършена, можем да добавим подобни правила и за галерии с две, четири или повече снимки на ред, или да променим броя видими снимки за различни екрани.