Wersja 2.x – Gridzy.Gallery

Strona została automatycznie przetłumaczona. Jeśli coś jest niejasne, zapoznaj się z angielską dokumentacją.

Podstawowe użytkowanie

Prześlij pliki Gridzy na swój serwer i dodaj je do swojej witryny (zwykle w sekcji nagłówka):

<link rel="stylesheet" href="gridzy/gridzy.min.css" />
<script src="gridzy/gridzy.min.js"></script>

Dodaj kod HTML (w dowolnym miejscu sekcji treści):

<div class="gridzy">
  <img src="https://loremflickr.com/640/480?random=1" alt="a random image" />
  <img src="https://loremflickr.com/480/640?random=2" alt="another random image" />
  <img src="https://loremflickr.com/640/640?random=3" alt="yet another random image" />
  <img src="https://loremflickr.com/640/480?random=4" alt="a random image again" />
  <img src="https://loremflickr.com/640/480?random=5" alt="one last random image" />
</div>

To wszystko! To jest w pełni funkcjonalny przykład. Nie jest wymagana żadna dodatkowa inicjalizacja.

Konfiguracja

Najprostszym sposobem konfiguracji Gridzy jest użycie atrybutów HTML. Wystarczy dodać prefiks data-gridzy- do nazw opcji. Tak więc, aby ustawić opcję spaceBetween , wystarczy dodać atrybut data-gridzy-spaceBetween .

<div class="gridzy" data-gridzy-spaceBetween="20" data-gridzy-desiredHeight="400">
  <img src="https://loremflickr.com/640/480?random=1" alt="a random image" />
  <img src="https://loremflickr.com/480/640?random=2" alt="another random image" />
  <img src="https://loremflickr.com/640/640?random=3" alt="yet another random image" />
  <img src="https://loremflickr.com/640/480?random=4" alt="a random image again" />
  <img src="https://loremflickr.com/640/480?random=5" alt="one last random image" />
</div>

Główne opcje

	Wartość domyślna	Opis
`animate`	`true`	Określa, czy animacje mają być używane przy zmianie siatki (np. przy zmianie rozmiaru okna przeglądarki lub ustawianiu filtra).
`layout`	`justified`	Definiuje używany układ. Gridzy.js 2 obsługuje dwa różne układy `justified` i `waterfall` . Każdy z nich ma własne dodatkowe parametry opcji, które można znaleźć poniżej tej tabeli.
`filter`	`*`	Określa, które obrazy powinny być wyświetlane. Dowolny selektor CSS może być użyty jako wartość tutaj. Zwykle ustawiane automatycznie za pomocą `filterControls` (patrz następna opcja). Sprawdź filtry
`filterControls`		Określa, które elementy formularza mogą być używane do filtrowania obrazów. Każdy selektor CSS, który wybiera elementy formularza HTML, może być używany jako wartość tutaj. Sprawdź filtry
`autoConsiderScrollBars`	`true`	Aby przewidzieć dostępną szerokość, jeśli paski przewijania pojawią się lub znikną. Zawsze zaleca się pozostawienie wartości `true` chyba że ten automatyzm powoduje problemy.

Justified Opcje układu

	Wartość domyślna	Opis
`autoFontSize`	`false`	Automatycznie aktualizuje właściwość font-size każdego pola na podstawie oryginalnego rozmiaru pola. Domyślnie właściwość font-size nie jest ustawiona jawnie.
`desiredHeight`	`190`	Definiuje żądaną wysokość wierszy elementów. Rzeczywista wysokość zostanie obliczona w zależności od dostępnej szerokości i elementów w wierszu.
`hideOnMissingImage`	`true`	Ukrywa pola zawierające obrazy, których nie można załadować.
`spaceBetween`	`4`	Definiuje odległość między elementami w pikselach.
`lastRowAlign` od wersji 2.3.0	`justified`	Definiuje zachowanie ostatniego wiersza. Dozwolone wartości to `left` , `center` , `right` i `justified` .
`singleRowAlign` od wersji 2.3.0	`justified`	Definiuje zachowanie, jeśli jest tylko jeden wiersz. Dozwolone wartości to `left` , `center` , `right` i `justified` .
~~`fillLastRow`~~ ~~od wersji 2.1.0~~	~~`true`~~	USUNIĘTO od wersji 2.4.0 (WYCOFANE od wersji 2.3.0 ) Ustawia obrazy tak, aby ostatni wiersz był zawsze całkowicie wypełniony. Jeśli planujesz dynamicznie dodawać obrazy, dobrym pomysłem może być dezaktywacja tej opcji. Nie ma wpływu na pojedyncze wiersze (patrz `fillSingleRow` ).
`fillSingleRow` od wersji 2.1.0	~~`true`~~	USUNIĘTO od wersji 2.4.0 (WYCOFANE od wersji 2.3.0 ) Jeśli jest tylko jeden wiersz, układa obrazy tak, aby wiersz był zawsze całkowicie wypełniony. Jeśli zdarzy się, że masz tylko jeden lub dwa obrazy w galerii, dobrym pomysłem może być dezaktywacja tej opcji.

Waterfall Opcje układu

	Wartość domyślna	Opis
`autoFontSize`	`false`	Automatycznie aktualizuje właściwość font-size każdego pola na podstawie oryginalnego rozmiaru pola. Domyślnie właściwość font-size nie jest ustawiona jawnie.
`desiredWidth`	`250`	Definiuje żądaną szerokość kolumn. Rzeczywista szerokość zostanie obliczona w zależności od dostępnej szerokości i liczby kolumn.
`hideOnMissingImage`	`true`	Ukrywa pola zawierające obrazy, których nie można załadować.
`horizontalOrder`	`false`	Definiuje, że elementy są umieszczane ściśle po jednym elemencie w każdej kolumnie od lewej do prawej, a następnie zaczynają się od nowa w najbardziej lewej kolumnie niezależnie od tego, w której kolumnie jest więcej miejsca. Domyślnie elementy będą zawsze umieszczane w kolumnie o najmniejszej wysokości.
`spaceBetween`	`4`	Definiuje odległość między elementami w pikselach.
`singleRowAlign` since version 2.7.0	`justified`	Defines the behavior when not all columns can be filled due to too few images. Allowed values are `left`, `center`, `right` and `justified`.

Więcej zaawansowanych opcji

Aby zapoznać się z bardziej zaawansowanymi opcjami, sprawdź API .

Semantyczny HTML

Najprostsza struktura HTML Gridzy wygląda następująco:

<div class="gridzy">
  <img src="https://loremflickr.com/640/480?random=1" alt="a random image" />
  <img src="https://loremflickr.com/480/640?random=2" alt="another random image" />
  <img src="https://loremflickr.com/640/640?random=3" alt="yet another random image" />
  <img src="https://loremflickr.com/640/480?random=4" alt="a random image again" />
  <img src="https://loremflickr.com/640/480?random=5" alt="one last random image" />
</div>

Jednakże Gridzy jest bardzo elastyczny i możesz użyć niemal każdej innej struktury HTML. Jest tylko kilka punktów do rozważenia:

Każde dziecko elementu kontenera reprezentuje jeden element w siatce.
Zarówno element kontenera, jak i jego elementy potomne mogą być dowolnym typem znacznika, takim jak ul i li (wystarczy rozważyć przywrócenie domyślnych ustawień przeglądarki).
Jeśli element img nie jest bezpośrednim elementem potomnym, musi mieć klasę gridzyImage .

Oto także działająca struktura HTML:

<ul class="gridzy">
  <li>
    <span>
      <img class="gridzyImage" src="https://loremflickr.com/640/480?random=1" alt="a random image" />
    </span>
  </li>
  <li>
    <span>
      <img class="gridzyImage" src="https://loremflickr.com/480/640?random=2" alt="another random image" />
    </span>
  </li>
  <li>
    <span>
      <img class="gridzyImage" src="https://loremflickr.com/640/640?random=3" alt="yet another random image" />
    </span>
  </li>
  <li>
    <span>
      <img class="gridzyImage" src="https://loremflickr.com/640/480?random=4" alt="a random image again" />
    </span>
  </li>
  <li>
    <span>
      <img class="gridzyImage" src="https://loremflickr.com/640/480?random=5" alt="one last random image" />
    </span>
  </li>
</ul>

Zwłaszcza jeśli chcesz dodać podpisy, potrzebujesz zaawansowanej struktury HTML. Aby dowiedzieć się więcej, zajrzyj do Captions & Skins .

Napisy i skórki

Jeśli chcesz dodać podpisy do swojej galerii, musisz zdefiniować wygląd. Dlatego dostępne są pewne predefiniowane skórki. Każda skórka składa się z pliku CSS. Musisz dodać ten plik oprócz głównych plików Gridzy (zwykle w sekcji head):

<link rel="stylesheet" href="gridzy/skins/gridzySkinClassic/style.min.css" />

Ponadto potrzebna jest zaawansowana struktura HTML:

<div class="gridzy gridzySkinClassic">
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/640/480?random=1" alt="a random image" />
    <figcaption class="gridzyCaption">a caption text</figcaption>
  </figure>
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/480/640?random=2" alt="another random image" />
    <figcaption class="gridzyCaption">another caption text</figcaption>
  </figure>
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/640/640?random=3" alt="yet another random image" />
    <figcaption class="gridzyCaption">yet another caption text</figcaption>
  </figure>
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/640/480?random=4" alt="a random image again" />
    <figcaption class="gridzyCaption">a caption text again</figcaption>
  </figure>
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/640/480?random=5" alt="one last random image" />
    <figcaption class="gridzyCaption">one last caption text</figcaption>
  </figure>
</div>

Jeśli zastanawiasz się nad strukturą HTML, zapoznaj się z semantycznym HTML-em .

W przypadku podpisu możesz użyć dowolnego typu tagu, upewnij się tylko, że ma klasę gridzyCaption . Element img potrzebuje klasy gridzyImage .

Powyższy przykład pokazuje skórkę gridzySkinClassic . Aby użyć innej, po prostu zamień nazwę skórki na jedną z tych:

Dołączone skórki

	Dostępne klasy
siatkaSkinBlank dobry punkt wyjścia do stworzenia własnej skórki podgląd na żywo	`gridzySkinBlank`
gridzySkinClassic podgląd na żywo	`gridzySkinClassic` `gridzySkinClassicLight`(NIEZALECANE od wersji 2.6.0)
gridzySkinFullOverlay podgląd na żywo	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(NIEZALECANE od wersji 2.6.0)
gridzySkinLift podgląd na żywo	`gridzySkinLift` `gridzySkinLiftLight`(NIEZALECANE od wersji 2.6.0)
gridzySkinMagnifier funkcja zoomu nie jest dołączona podgląd na żywo	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(NIEZALECANE od wersji 2.6.0)

Wszystkie powyższe skórki wymagają jedynie pliku CSS, jednak istnieją dodatkowe skórki, które również wymagają pliku JavaScript:

<link rel="stylesheet" href="gridzy/skins/gridzySkinBlur/style.min.css" />
<script src="gridzy/skins/gridzySkinBlur/script.min.js"></script>

	Dostępne klasy
gridzySkinBlur nie działa w IE podgląd na żywo	`gridzySkinBlur` `gridzySkinBlurLight`(NIEZALECANE od wersji 2.6.0)
gridzySkinCard podgląd na żywo	`gridzySkinCard` `gridzySkinCardLight`(NIEZALECANE od wersji 2.6.0)

Opcje skórki

Od wersji 2.6.0 są opcje konfiguracji wbudowanych skórek. W zależności od konkretnej skórki możesz ustawić kolor tła, kolor tekstu i cień tekstu. Wystarczy użyć niestandardowych właściwości CSS, jak widać tutaj:

<div class="gridzy gridzySkinClassic" style="--background: rgba(0, 80, 117, .8); --color: rgb(238, 238, 238); ">
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/640/480?random=1" alt="a random image" />
    <figcaption class="gridzyCaption">a caption text</figcaption>
  </figure>
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/480/640?random=2" alt="another random image" />
    <figcaption class="gridzyCaption">another caption text</figcaption>
  </figure>

  ...

</div>

Sprawdź tutaj obsługiwane zmienne i wartości domyślne dla każdej skórki:

gridzySkinClassic

Zmienny	Wartość domyślna	Informacja
`--background`	`rgba(0, 0, 0, .7)`	zezwala na dowolną wartość tła CSS
`--color`	`rgb(255, 255, 255)`	zezwala na dowolną wartość koloru CSS
`--text-shadow`	`none`	zezwala na dowolną wartość CSS text-shadow

gridzySkinFullOverlay

Zmienny	Wartość domyślna	Informacja
`--background`	`rgba(0, 0, 0, .7)`	zezwala na dowolną wartość tła CSS
`--color`	`rgb(255, 255, 255)`	zezwala na dowolną wartość koloru CSS
`--text-shadow`	`none`	zezwala na dowolną wartość CSS text-shadow

gridzySkinLift

Zmienny	Wartość domyślna	Informacja
`--background`	`rgba(0, 0, 0, .7)`	zezwala na dowolną wartość tła CSS
`--color`	`rgb(255, 255, 255)`	zezwala na dowolną wartość koloru CSS
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	zezwala na dowolną wartość CSS text-shadow

gridzySkinMagnifier

Zmienny	Wartość domyślna	Informacja
`--background`	`rgba(0, 0, 0, .7)`	zezwala na dowolną wartość tła CSS
`--color`	`rgb(255, 255, 255)`	zezwala na dowolną wartość koloru CSS

Ta skórka nie obsługuje --text-shadow

gridzySkinBlur

Zmienny	Wartość domyślna	Informacja
`--background`	`rgba(0, 0, 0, .7)`	zezwala na dowolną wartość tła CSS
`--color`	`rgb(255, 255, 255)`	zezwala na dowolną wartość koloru CSS
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	zezwala na dowolną wartość CSS text-shadow

gridzySkinCard

Zmienny	Wartość domyślna	Informacja
`--background`	`rgba(0, 0, 0, 1)`	zezwala na dowolną wartość tła CSS
`--color`	`rgb(255, 255, 255)`	zezwala na dowolną wartość koloru CSS
`--text-shadow`	`none`	zezwala na dowolną wartość CSS text-shadow

Wszystkie predefiniowane skórki obsługują tylko proste podpisy tekstowe. Możesz tworzyć własne i bardziej złożone skórki. Zapoznaj się ze Style Gridzy .

Styl Gridzy

Jeśli żadna z gotowych skórek nie spełnia Twoich wymagań, możesz stworzyć własną.

Najłatwiejszym sposobem jest najpierw skopiowanie istniejącej skórki i dostosowanie jej do własnych potrzeb. Predefiniowana skórka gridzySkinBlank zwykle zapewnia dobrą podstawę, a także dobrą dokumentację w pliku CSS:

/** SKIN Blank **/

/* all gallery items (direct children of the main container element) */
.gridzySkinBlank > .gridzyItem {
  overflow: hidden;
}

/* all gallery images (predefined in Gridzy's main CSS file, but can be overridden) */
.gridzySkinBlank .gridzyImage {
}

/* all gallery captions (just create your very own style) */
.gridzySkinBlank .gridzyCaption {
  margin: 0;
  padding: .5em;
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  transition: opacity .5s;
  overflow: auto;
  background: rgba(0, 0, 0, .7);
  color: rgb(255, 255, 255);
}

.gridzySkinBlank > .gridzyItem:hover .gridzyCaption {
  opacity: 1;
}

W pliku CSS znajdziesz klasy gridzySkinBlank , gridzyImage i gridzyCaption . Gridzy samo w sobie nie potrzebuje tych klas. Są one używane tylko do stylizacji, więc możesz je usunąć lub zmienić nazwę, jeśli chcesz.

Dodatkowo znajdziesz klasę CSS gridzyItem . Gridzy ustawia tę klasę automatycznie dla wszystkich bezpośrednich dzieci głównego elementu kontenera. Możesz więc użyć tej klasy do stylizowania elementów swojej galerii.

Pamiętaj o ważnych rzeczach

Zawartość elementu powinna być w pełni responsywna. Weź pod uwagę, że rozmiar elementu z pewnością się zmieni. Użyj wartości procentowych zamiast wartości pikseli. I spójrz na opcję układu Gridzy autoFontSize , która wiąże rozmiar czcionki z rozmiarem pola elementu.
Każdy element powinien mieć dobrze zdefiniowany współczynnik proporcji. Współczynnik proporcji elementu nigdy się nie zmieni i jest potrzebny do obliczenia siatki. Jeśli więc element nie ma automatycznie dobrze zdefiniowanego współczynnika proporcji, zdefiniuj go ręcznie (np. za pomocą css).

W niektórych przypadkach łatwiej jest nadać styl zawartości elementów przed zainicjowaniem Gridzy. Po prostu tymczasowo usuń klasę gridzy lub plik javascript Gridzy.

To wszystko! To wszystko, czego potrzebujesz, aby zbudować własną skórkę. Większość predefiniowanych skórek nie używa więcej niż to.

Ale może być więcej, jeśli chcesz…

Zaawansowane skórki

Gridzy używa więcej klas CSS niż tylko gridzyItem . Większość z nich zostanie ustawiona automatycznie i możesz ich używać również do stylizacji.

Główne klasy kontenerów

Nazwa klasy	Opis
`gridzy` ustawić ręcznie	Gridzy automatycznie wyszukuje elementy tej klasy i inicjuje je.
`gridzyAnimated`	Zostanie ustawione automatycznie, jeśli opcja `animate` jest ustawiona `true` . Jeśli ta klasa jest ustawiona ręcznie, opcja `animate` automatycznie również stanie się `true` (chyba że jest jawnie ustawiona na `false` ).

Klasy przedmiotów

Nazwa klasy	Opis
`gridzyItem`	Zostanie ustawione, gdy tylko element rozpocznie proces inicjalizacji. Nigdy nie zostanie usunięte.
`gridzyItemInitializing`	Zostanie ustawione, gdy tylko element rozpocznie proces inicjalizacji. Zostanie zastąpione przez `gridzyItemReady` , gdy tylko element zostanie w pełni zainicjowany. Nie oznacza to, że obrazy są w pełni załadowane (patrz `gridzyItemLoading` ), ale że element jest gotowy do wyświetlenia.
`gridzyItemReady`	Zastąpi `gridzyItemInitializing` , gdy tylko element zostanie w pełni zainicjowany. Nigdy nie zostanie usunięty. Nie oznacza to, że obrazy są w pełni załadowane (patrz `gridzyItemComplete` ), ale że element jest gotowy do wyświetlenia.
`gridzyItemLoading`	Zostanie ustawione, gdy tylko element rozpocznie proces inicjalizacji. Zostanie zastąpione przez `gridzyItemComplete` , gdy tylko zawarte obrazy (zwykle tylko jeden) zostaną w pełni załadowane.
`gridzyItemComplete`	Zastąpi `gridzyItemLoading` , gdy tylko zawarte obrazy (zwykle tylko jeden) zostaną w pełni załadowane. Nigdy nie zostanie usunięte.
`gridzyItemInitialToVisible`	Zostanie ustawione, gdy tylko element zacznie pojawiać się po raz pierwszy. Zostanie usunięte, gdy tylko element będzie całkowicie widoczny.
`gridzyItemVisible`	Zostanie ustawione, gdy tylko element będzie w pełni widoczny. Zostanie usunięte, gdy tylko element zacznie znikać.
`gridzyItemVisibleToHidden`	Zostanie ustawione, gdy tylko element zacznie znikać. Zostanie usunięte, gdy tylko element zostanie całkowicie ukryty.
`gridzyItemHidden`	Zostanie ustawione, gdy tylko element zostanie całkowicie ukryty. Zostanie usunięte, gdy tylko element zacznie się pojawiać.
`gridzyItemHiddenToVisible`	Zostanie ustawione, gdy tylko element zacznie się pojawiać (oprócz pojawienia się za pierwszym razem – patrz klasa `gridzyItemInitialToVisible` ). Zostanie usunięte, gdy tylko element będzie całkowicie widoczny.
`gridzyItemVisibleToVisible`	Zostanie ustawione, gdy coś w siatce ulegnie zmianie, ale sam element był i pozostanie widoczny. Zostanie usunięte, gdy tylko animacja zmiany zostanie ukończona.

Domyślnie wskaźnik procesu oraz animacje pojawiania się i znikania obrazów są wstępnie zdefiniowane w głównym pliku CSS Gridzy.

Za pomocą wyżej wymienionych klas CSS możesz stylizować własne wskaźniki procesów i animacje. Odważ się zajrzeć do głównego pliku CSS Gridzy, aby zrozumieć, co musisz zastąpić. Nie obawiaj się, wszystko jest tam dobrze udokumentowane.

Zoptymalizuj ładowanie

Jeśli używasz wielu obrazów, może to być dobry pomysł, aby pomóc Gridzy w szybszym tworzeniu siatki.

Zapobiegaj przeskakiwaniu obrazów

Gridzy absolutnie potrzebuje współczynnika proporcji wszystkich obrazów, aby obliczyć siatkę. Ten fakt powoduje przeskakiwanie elementów, jeśli niektóre obrazy są gotowe, a inne nie. Im więcej obrazów, tym bardziej irytujący może być ten efekt.

Aby zapobiec takiemu zachowaniu, po prostu ustaw atrybuty width i height dla wszystkich elementów img . Ważne jest, aby ustawić prawidłowe wartości dla każdego pojedynczego obrazu, w przeciwnym razie obrazy zostaną zniekształcone. Prawidłowe wartości to oryginalna szerokość i wysokość odpowiedniego obrazu:

<div class="gridzy">
  <img src="https://loremflickr.com/640/480?random=1" width="640" height="480" alt="a random image" />
  <img src="https://loremflickr.com/480/640?random=2" width="480" height="640" alt="another random image" />
  <img src="https://loremflickr.com/640/640?random=3" width="640" height="640" alt="yet another random image" />
  <img src="https://loremflickr.com/640/480?random=4" width="640" height="480" alt="a random image again" />
  <img src="https://loremflickr.com/640/480?random=5" width="640" height="480" alt="one last random image" />
</div>

Następnie Gridzy może natychmiast obliczyć siatkę, bez konieczności znajomości rzeczywistych rozmiarów obrazów.

Leniwe ładowanie

Aby załadować tylko te obrazy, które znajdują się w widocznym obszarze, wykonaj następujące kroki:

Wstaw atrybuty width i height zgodnie z powyższym opisem (upewnij się, że używasz prawidłowych wartości)
Zastąp wszystkie atrybuty src atrybutem data-gridzylazysrc jak pokazano poniżej (jeśli posiadasz również atrybuty srcset , zastąp je atrybutem data-gridzylazysrcset ).

<div class="gridzy">
  <img data-gridzylazysrc="https://loremflickr.com/640/480?random=1" width="640" height="480" alt="a random image" />
  <img data-gridzylazysrc="https://loremflickr.com/480/640?random=2" width="480" height="640" alt="another random image" />
  <img data-gridzylazysrc="https://loremflickr.com/640/640?random=3" width="640" height="640" alt="yet another random image" />
  <img data-gridzylazysrc="https://loremflickr.com/640/480?random=4" width="640" height="480" alt="a random image again" />
  <img data-gridzylazysrc="https://loremflickr.com/640/480?random=5" width="640" height="480" alt="one last random image" />
</div>

Po wykonaniu tych kroków obrazy załadują się natychmiast po ich umieszczeniu w obszarze widoku lub w jego pobliżu.

Wskaźnik procesu

Wskaźnik procesu to mała animowana ikona, która pojawia się podczas ładowania obrazu. Jeśli używasz napisów i skórek , wskaźnik procesu zostanie wyświetlony automatycznie. W przeciwnym razie potrzebujesz pewnych dostosowań:

Umieść każdy element img w elemencie div
(lub do dowolnego innego elementu – zobacz semantyczny HTML , aby dowiedzieć się więcej)
Dodaj klasę gridzyImage do każdego elementu img

<div class="gridzy">
  <div><img src="https://loremflickr.com/640/480?random=1" class="gridzyImage" alt="a random image" /></div>
  <div><img src="https://loremflickr.com/480/640?random=2" class="gridzyImage" alt="another random image" /></div>
  <div><img src="https://loremflickr.com/640/640?random=3" class="gridzyImage" alt="yet another random image" /></div>
  <div><img src="https://loremflickr.com/640/480?random=4" class="gridzyImage" alt="a random image again" /></div>
  <div><img src="https://loremflickr.com/640/480?random=5" class="gridzyImage" alt="one last random image" /></div>
</div>

Następnie, jeśli ładowanie obrazów trwa dłużej, powinny pojawić się wskaźniki procesu.

Filtry

Filtry w Gridzy są dość proste, ale potężne. Niezależnie od tego, jakiego rodzaju filtru potrzebujesz, jest bardzo prawdopodobne, że jest on wykonalny. Wszystko, czego potrzebujesz, to trochę CSS i kilka elementów formularza HTML…

Oto przykład funkcjonalny:

<div id="myFilterControls">
  <button value="*">All</button>
  <button value=".animals">Animals</button>
  <button value=".architecture">Architecture</button>
  <button value=".people">People</button>
</div>

<div class="gridzy" data-gridzy-filterControls="#myFilterControls button">
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=1" alt="a random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=1" alt="a random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=1" alt="a random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=2" alt="another random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=2" alt="another random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=2" alt="another random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=3" alt="yet another random animal image" />
</div>

Zbudujmy to krok po kroku

1. Najpierw potrzebujemy zwykłej struktury HTML Gridzy i ustawimy nazwy klas dla wszystkich elementów galerii, abyśmy mogli je później filtrować

<div class="gridzy">
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=1" alt="a random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=1" alt="a random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=1" alt="a random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=2" alt="another random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=2" alt="another random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=2" alt="another random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=3" alt="yet another random animal image" />
</div>

W tym przykładzie używamy tylko jednej klasy dla każdego elementu. Ale możesz również ustawić wiele klas dla jednego elementu, jeśli ten element powinien być możliwy do znalezienia za pomocą wielu filtrów.

2. Następnie dodajemy kilka przycisków, za pomocą których możemy zmienić filtry

<button value="*">All</button>
<button value=".animals">Animals</button>
<button value=".architecture">Architecture</button>
<button value=".people">People</button>

<div class="gridzy">
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=1" alt="a random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=1" alt="a random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=1" alt="a random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=2" alt="another random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=2" alt="another random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=2" alt="another random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=3" alt="yet another random animal image" />
</div>

Zamiast przycisków możesz również wykorzystać inne elementy formularza, takie jak pola wyboru, przyciski radiowe, pola wyboru i tak dalej.

Jak widać, wartości przycisków to zwykłe selektory CSS. Gdy tylko skończymy, kliknięcie takiego przycisku wyświetli obrazy pasujące do tego selektora CSS. Technicznie rzecz biorąc, po prostu ustawia opcję filter na tę wartość.

Możesz również używać znacznie bardziej złożonych selektorów. Na przykład :not(.animals) też by zadziałało, tak samo jak .animals.people i .animals, .people .

3. Na koniec umieszczamy przyciski w kontenerze div i wiążemy je z galerią Gridzy, ustawiając opcję filterControls :

<div id="myFilterControls">
  <button value="*">All</button>
  <button value=".animals">Animals</button>
  <button value=".architecture">Architecture</button>
  <button value=".people">People</button>
</div>

<div class="gridzy" data-gridzy-filterControls="#myFilterControls button">
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=1" alt="a random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=1" alt="a random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=1" alt="a random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=2" alt="another random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=2" alt="another random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=2" alt="another random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=3" alt="yet another random animal image" />
</div>

Jak widać, używamy również selektora CSS dla opcji filterControls . Kontener div z atrybutem id służy jedynie do ułatwienia wyboru przycisków za pomocą tego selektora CSS.

To wszystko!

Jeśli wolisz rozwiązanie JavaScript, sprawdź API .

API

Chociaż Gridzy ma własne API, większość rzeczy można zrobić bez niego, po prostu manipulując DOM. Gridzy to zauważy i dostosuje siatkę. Ale jest też bardzo potężne API…

Manipulowanie DOM

Do wszystkich manipulacji modelem DOM (Document Object Model) najpierw potrzebujemy elementu kontenera:

// get the container element
var gridzyElement = document.querySelector('.gridzy');

Dodaj obrazy

Ważne jest, aby w pełni zbudować i wypełnić nowy element podrzędny przed dodaniem go do elementu kontenera. W przeciwnym razie Gridzy nie wykryje prawidłowych wymiarów.

// create a new img element
var newImage = document.createElement('img');

// add src attribute (!! before you add it to the container element !!)
newImage.src = 'https://loremflickr.com/640/480';

// add it as last element to the container element
gridzyElement.appendChild(newImage);

// or as first element (or anywhere in between)
gridzyElement.insertBefore(newImage, gridzyElement.firstChild);

Usuń obrazy

// remove the first image
gridzyElement.removeChild(gridzyElement.firstElementChild);

Zmień opcje

// change the spaceBetween option to a specific value
gridzyElement.setAttribute('data-gridzy-spaceBetween', '10');

// change the layout option to a specific value
gridzyElement.setAttribute('data-gridzy-layout', 'waterfall');

// reset the spaceBetween option to its default value
gridzyElement.removeAttribute('data-gridzy-spaceBetween');

Więcej o manipulowaniu DOM znajdziesz w MDN web docs . Jest tam również dostępny Introduction to the DOM .

Własnościowe API

Aby skorzystać z API, najpierw potrzebujemy instancji Gridzy, która jest powiązana z elementem kontenera Gridzy:

// get the Gridzy instance
var gridzyInstance = document.querySelector('.gridzy').gridzy;

Pobierz opcję

// get the value of a single option
var currentLayout = gridzyInstance.getOption('layout');

Uzyskaj wszystkie opcje

// get all option values as an object
var currentOptions = gridzyInstance.getOptions();

Ustaw opcje

// set specific option values
gridzyInstance.setOptions({
  spaceBetween: 10,
  layout: 'waterfall'
});

// or reset options to their default values
gridzyInstance.setOptions({
  spaceBetween: null,
  layout: null
});

Zastosuj filtr

Zastosowanie filtra to po prostu ustawienie opcji filter , którą może być dowolny prawidłowy selektor CSS:

// set the filter to match items with class "animals"
gridzyInstance.setOptions({
  filter: '.animals'
});

// reset the filter to match all items again
gridzyInstance.setOptions({
  filter: '*'
});

// set the filter to match items without class "animals"
gridzyInstance.setOptions({
  filter: ':not(.animals)'
});

// set the filter to match items with class "animals" or "people"
gridzyInstance.setOptions({
  filter: '.animals, .people'
});

// set the filter to match items that have both classes, "animals" and "people"
gridzyInstance.setOptions({
  filter: '.animals.people'
});

Dodaj funkcje wywołania zwrotnego

NIEZALECANE od wersji 2.4.0
Zamiast tego użyj nowoczesnych i bardziej elastycznych wydarzeń . Zobacz następną sekcję, aby uzyskać więcej szczegółów.

~~Gridzy.js 2 obsługuje niektóre opcje dla funkcji wywołania zwrotnego. Można je ustawić tylko za pomocą zastrzeżonego API, ale tak jak inne opcje:~~

// same as set other options
gridzyInstance.setOptions({
  onOptionsChanged: function() {
    // will be executed each time the options have changed.
  },
  onBeforeOptionsChanged: function() {
    // will be executed, before new options take effect.
  }
});

	~~Opis~~
~~`onBeforeOptionsChanged`~~	~~Funkcja wywołania zwrotnego wywoływana bezpośrednio przed ustawieniem opcji.~~
~~`onOptionsChanged`~~	~~Funkcja wywołania zwrotnego wywoływana bezpośrednio po ustawieniu opcji.~~
~~`onBeforeRender`~~	~~Funkcja wywołania zwrotnego wywoływana bezpośrednio przed renderowaniem.~~
~~`onRender`~~	~~Funkcja wywołania zwrotnego wywoływana bezpośrednio po renderowaniu.~~

Użyj zdarzeń

od wersji 2.4.0

Zdarzeń Gridzy można używać dokładnie tak samo, jak zwykłych zdarzeń JavaScript:

document.addEventListener('gridzyOptionsChanged', function(event) {
    // will be executed each time the options have changed.
});

document.addEventListener('gridzyBeforeOptionsChanged', function(event) {
    // will be executed, before new options take effect.
});

Niektóre zdarzenia są wyzwalane w elemencie kontenera Gridzy, a inne w poszczególnych elementach elementów w elemencie kontenera.

Zdarzenia wywołane w elemencie kontenera Gridzy:

	Opis
`gridzyBeforeInit`	Wyzwalane przed inicjalizacją galerii.
`gridzyInit`	Uruchamia się po inicjalizacji galerii.
`gridzyBeforeOptionsChanged`	Wyzwala się przed ustawieniem opcji.
`gridzyOptionsChanged`	Uruchamia się po ustawieniu opcji.
`gridzyBeforeRender`	Wypala się przed renderowaniem.
`gridzyRender`	Pożary po renderowaniu.

Jeśli przegapiłeś jakieś wydarzenie, wyślij prośbę o wsparcie .

event.target udostępnia element kontenera Gridzy.
event.detail.instance udostępnia instancję Gridzy.

Zdarzenia wyzwalane na elementach elementu:

	Opis
`gridzyItemBeforeInit`	Wyzwalane przed inicjalizacją elementu.
`gridzyItemInit`	Uruchamia się po inicjalizacji elementu.
`gridzyItemLoading`	Uruchamia się, gdy element zaczyna się ładować.
`gridzyItemReady`	Wyzwala się, gdy element jest gotowy do obliczenia siatki. Tak więc współczynnik proporcji jest znany, ale obraz może być nadal ładowany.
`gridzyItemComplete`	Uruchamia się, gdy obraz elementu zostanie w pełni załadowany.

Jeśli przegapiłeś jakieś wydarzenie, wyślij prośbę o wsparcie .

event.target zawiera odpowiedni element elementu.
event.detail.instance udostępnia instancję Gridzy.

API – globalne

Istnieją pewne funkcje, które są niezależne od instancji Gridzy. Więc nie musimy wcześniej pobierać instancji.

Pobierz opcję domyślną

// get the default value of a single option
var defaultLayout = Gridzy.getDefaultOption('layout');

Pobierz wszystkie domyślne opcje

// get all default option values as an object, including the default layout options of the default layout
var defaultOptions = Gridzy.getDefaultOptions();

// or get all default option values, including the default layout options of a specific layout
var defaultOptions = Gridzy.getDefaultOptions('waterfall');

Ustaw opcje domyślne

Nie ustawia to opcji wszystkich już zainicjowanych instancji Gridzy, ale definiuje podstawę dla nowych instancji. Jednak jeśli opcja istniejącej instancji zostałaby zresetowana za pomocą wartości null , użyta zostałaby nowa wartość domyślna.

// set default option values
Gridzy.setDefaultOptions({
  spaceBetween: 10,
  layout: 'waterfall'
});

Możesz użyć tego do globalnego ustawienia opcji, jeśli wywołasz to zanim DOM będzie gotowy. Więc nie będziesz już musiał ustawiać opcji jako atrybutów.

Automatyzmy

Dopóki wszystkie automatyzmy Gridzy.js 2 są aktywne, nie ma potrzeby stosowania poniższych metod. Jednak automatyzmy można wyłączyć, aby używać Gridzy w bardziej tradycyjny sposób:

// disable automatic initializations
Gridzy.setDefaultOptions({
  autoInitOnDomReady: false,
  autoInitOnDomMutation: false
});

// or switch off all mutation observers
Gridzy.setDefaultOptions({
  autoInitOnDomMutation: false,
  autoSyncChildListMutation: false,
  autoSyncAttributesMutation: false,
  autoSyncChildClassMutation: false,
  autoSyncImageMutation: false
});

Niektórych z tych opcji nie można ustawić za pomocą atrybutów data-gridzy- ani za pomocą setOptions() z przyczyn logicznych:

	Wartość domyślna	Opis
`autoInitOnDomReady`	`true`	Wykrywa elementy z klasą `gridzy` podczas ładowania strony i inicjuje je. Można ustawić za pomocą `Gridzy.setDefaultOptions()`
`autoInitOnDomMutation` MutationObserver	`true`	Wykrywa nowe elementy z klasą `gridzy` natychmiast po ich pojawieniu się w DOM i inicjuje je. (np. podczas korzystania z przejść stron) Można ustawić za pomocą `Gridzy.setDefaultOptions()`
`autoSyncChildListMutation` MutationObserver	`true`	Wykrywa, czy elementy podrzędne (obrazy) zostały dodane lub usunięte i automatycznie aktualizuje siatkę. Można ustawić za pomocą `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	Definiuje, czy atrybuty `data-gridzy-` są ogólnie używane, czy nie. Jeśli jest to `false` opcje można ustawić tylko za pomocą zastrzeżonego API. Można ustawić za pomocą `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` MutationObserver	`true`	Wykrywa zmiany atrybutów `data-gridzy-` i automatycznie aktualizuje siatkę. Wykrywa również, czy klasa `gridzyAnimated` została dodana lub usunięta i czy wystąpiły zmiany atrybutu `style` . Jeśli `useOptionAttributes` ma wartość `false` , wykrywa tylko zmiany atrybutu `style` . Można ustawić za pomocą `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` MutationObserver	`true`	Wykrywa zmiany atrybutów `class` wszystkich elementów podrzędnych (obrazów). Istotne w odniesieniu do filtrów. Można ustawić za pomocą `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` MutationObserver od wersji 2.5.0	`true`	Wykrywa zmiany atrybutów `src` wszystkich obrazów. Istotne, gdy jest używane z React lub podobnymi bibliotekami. Można ustawić za pomocą `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` Zmień rozmiarObserwatora od wersji 2.6.0	`true`	Wykrywa zmiany szerokości elementu. Istotne w kontekście responsywnego projektowania. (Przed wersją 2.6.0 używano nasłuchiwacza zdarzeń zmiany rozmiaru okna) Można ustawić za pomocą `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Zainicjuj ręcznie

// initialize a new Gridzy instance
var gridzyInstance = new Gridzy(document.querySelector('.gridzy'), {
  spaceBetween: 10,
  layout: 'waterfall'
});

Zniszcz instancję

Mówiąc w skrócie, jest to przeciwieństwo inicjalizacji Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

Synchronizuj listę dzieci ręcznie

// after child elements (images) are added to or removed from the DOM.
gridzyInstance.syncChildList();

Synchronizuj ręcznie pojedynczy element podrzędny

Zwykle nie jest to konieczne, poza bardzo rzadkimi przypadkami.

// after child elements (images) are added to the DOM and only one of them should be synced to Gridzy.
gridzyInstance.syncChild(childElement);

Synchronizuj atrybuty ręcznie

Należy pamiętać, że opcja useOptionAttributes musi mieć true .

// after data-gridzy- attributes have changed
gridzyInstance.syncAttributes();

Wymuś renderowanie

Zwykle nie jest to potrzebne, nawet jeśli wszystkie automatyzmy są wyłączone

gridzyInstance.render();

Wtyczka WordPress

Biblioteka JavaScript

Praca