Верзија 2.к – Gridzy.Gallery

Сајт је аутоматски преведен. Ако нешто није јасно, погледајте енглеску документацију.

Основна употреба

Отпремите Гридзи датотеке на свој сервер и додајте их на своју веб локацију (обично у одељку заглавља):

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

Додајте ХТМЛ код (било где у делу тела):

<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>

То је то! То је потпуно функционалан пример. Није потребна додатна иницијализација.

Конфигурација

Најлакши начин да конфигуришете Гридзи је да користите само ХТМЛ атрибуте. Само треба да додате префикс именима опција са data-gridzy- . Дакле, да бисте подесили опцију spaceBetween , само додајте атрибут 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>

Главне опције

	Подразумевана вредност	Опис
`animate`	`true`	Одређује да ли анимације треба да се користе када се мрежа промени (на пример, када се мења величина прозора прегледача или када се поставља филтер).
`layout`	`justified`	Дефинише коришћени распоред. Гридзи.јс 2 подржава два различита изгледа `justified` и `waterfall` . Сваки од њих има своје додатне параметре опција, које можете пронаћи испод ове табеле.
`filter`	`*`	Одређује које слике треба приказати. Овде се као вредност може користити било који ЦСС-селектор. Обично се аутоматски подешава преко `filterControls` (погледајте следећу опцију). Погледајте филтере
`filterControls`		Одређује који елементи форме могу да се користе за филтрирање слика. Овде се као вредност може користити било који ЦСС селектор који бира елементе ХТМЛ обрасца. Погледајте филтере
`autoConsiderScrollBars`	`true`	Да бисте предвидели доступну ширину ако се траке за померање појаве или нестану. Увек се препоручује да га оставите `true` осим ако овај аутоматизам не изазива проблеме.

Justified Опције распореда

	Подразумевана вредност	Опис
`autoFontSize`	`false`	Аутоматски ажурира својство величине фонта сваке кутије на основу оригиналне величине оквира. Подразумевано својство величине фонта није експлицитно подешено.
`desiredHeight`	`190`	Дефинише жељену висину редова елемената. Стварна висина ће се израчунати у зависности од доступне ширине и елемената у реду.
`hideOnMissingImage`	`true`	Сакрива оквире који садрже слике које нису могле да се учитају.
`spaceBetween`	`4`	Дефинише растојање између елемената у пикселима.
`lastRowAlign` од верзије 2.3.0	`justified`	Дефинише понашање последњег реда. Дозвољене вредности су `left` , `center` , `right` и `justified` .
`singleRowAlign` од верзије 2.3.0	`justified`	Дефинише понашање ако постоји само један ред. Дозвољене вредности су `left` , `center` , `right` и `justified` .
~~`fillLastRow`~~ ~~од верзије 2.1.0~~	~~`true`~~	УКЛОНО од верзије 2.4.0 (ЗАСТАРЕЛО од верзије 2.3.0 ) Распоређује слике тако да је последњи ред увек потпуно попуњен. Ако планирате да додајете слике динамички, било би добро да ово деактивирате. Не утиче на појединачне редове (погледајте `fillSingleRow` ).
`fillSingleRow` од верзије 2.1.0	~~`true`~~	УКЛОНО од верзије 2.4.0 (ЗАСТАРЕЛО од верзије 2.3.0 ) Ако постоји само један ред, он распоређује слике тако да је ред увек потпуно попуњен. Ако се може десити да имате само једну или две слике у галерији, било би добро да ово деактивирате.

Waterfall Опције распореда

	Подразумевана вредност	Опис
`autoFontSize`	`false`	Аутоматски ажурира својство величине фонта сваке кутије на основу оригиналне величине оквира. Подразумевано својство величине фонта није експлицитно подешено.
`desiredWidth`	`250`	Дефинише жељену ширину колона. Стварна ширина ће бити израчуната у зависности од доступне ширине и броја колона.
`hideOnMissingImage`	`true`	Сакрива оквире који садрже слике које нису могле да се учитају.
`horizontalOrder`	`false`	Дефинише да се елементи постављају стриктно по један елемент у свакој колони с лева на десно, а затим поново почиње у крајњој левој колони независно у којој колони је више места. Подразумевано, елементи ће увек бити смештени у колону са најмањом висином.
`spaceBetween`	`4`	Дефинише растојање између елемената у пикселима.
`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`.

Више напредних опција

За напредније опције погледајте АПИ .

Семантички ХТМЛ

Најједноставнија ХТМЛ структура Гридзија је ова:

<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>

Међутим, Гридзи је веома флексибилан и можете користити скоро сваку другу ХТМЛ структуру. Постоји само неколико тачака које треба узети у обзир:

Свако дете елемента контејнера представља једну ставку у мрежи.
И елемент контејнера и његови потомци могу бити било које врсте ознаке, као што су ul и li (само размислите о ресетовању подразумеваних вредности претраживача).
Ако img елемент сам по себи није директно дете, потребна му је класа gridzyImage .

Дакле, ово је такође функционална ХТМЛ структура:

<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>

Нарочито ако желите да додате натписе, потребна вам је напредна ХТМЛ структура. Да бисте сазнали више о томе, погледајте Цаптионс & Скинс .

Наслови и скинови

Ако желите да додате натписе у своју галерију, морате да дефинишете изглед. Због тога су доступни неки унапред дефинисани скинови. Сваки скин који се састоји од ЦСС датотеке. Морате да додате ову датотеку поред главних Гридзи датотека (обично у одељку за главу):

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

Штавише, потребна вам је напредна ХТМЛ структура:

<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>

Ако се питате о ХТМЛ структури, погледајте Семантички ХТМЛ .

За натпис можете користити било коју врсту ознаке, само се уверите да има класу gridzyCaption . Елементу img потребна је класа gridzyImage .

Горњи пример вам показује кожу gridzySkinClassic . Да бисте користили други, само замените назив коже једним од ових:

Инцлудед Скинс

	Доступне класе
гридзиСкинБланк добра полазна тачка за креирање сопствене коже преглед уживо	`gridzySkinBlank`
gridzySkinClassic преглед уживо	`gridzySkinClassic` `gridzySkinClassicLight`(ЗАСТАРЕЛО од верзије 2.6.0)
gridzySkinFullOverlay преглед уживо	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(ЗАСТАРЕЛО од верзије 2.6.0)
gridzySkinLift преглед уживо	`gridzySkinLift` `gridzySkinLiftLight`(ЗАСТАРЕЛО од верзије 2.6.0)
gridzySkinMagnifier функција зумирања није укључена преглед уживо	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(ЗАСТАРЕЛО од верзије 2.6.0)

Свим горњим скиновима је потребна само ЦСС датотека, али постоје додатни скинови који такође захтевају ЈаваСцрипт датотеку:

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

	Доступне класе
gridzySkinBlur не ради у ИЕ преглед уживо	`gridzySkinBlur` `gridzySkinBlurLight`(ЗАСТАРЕЛО од верзије 2.6.0)
gridzySkinCard преглед уживо	`gridzySkinCard` `gridzySkinCardLight`(ЗАСТАРЕЛО од верзије 2.6.0)

Опције коже

Од верзије 2.6.0 постоје опције за конфигурисање уграђених скинова. У зависности од специфичне коже, можете подесити боју позадине, боју текста и сенку текста. Морате само да користите ЦСС прилагођена својства као што можете видети овде:

<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>

Овде погледајте подржане варијабле и подразумеване вредности за сваку кожу:

gridzySkinClassic

Променљива	Подразумевана вредност	Информације
`--background`	`rgba(0, 0, 0, .7)`	дозвољава било коју ЦСС вредност позадине
`--color`	`rgb(255, 255, 255)`	дозвољава било коју вредност ЦСС боје
`--text-shadow`	`none`	дозвољава било коју ЦСС вредност сенке текста

gridzySkinFullOverlay

Променљива	Подразумевана вредност	Информације
`--background`	`rgba(0, 0, 0, .7)`	дозвољава било коју ЦСС вредност позадине
`--color`	`rgb(255, 255, 255)`	дозвољава било коју вредност ЦСС боје
`--text-shadow`	`none`	дозвољава било коју ЦСС вредност сенке текста

gridzySkinLift

Променљива	Подразумевана вредност	Информације
`--background`	`rgba(0, 0, 0, .7)`	дозвољава било коју ЦСС вредност позадине
`--color`	`rgb(255, 255, 255)`	дозвољава било коју вредност ЦСС боје
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	дозвољава било коју ЦСС вредност сенке текста

gridzySkinMagnifier

Променљива	Подразумевана вредност	Информације
`--background`	`rgba(0, 0, 0, .7)`	дозвољава било коју ЦСС вредност позадине
`--color`	`rgb(255, 255, 255)`	дозвољава било коју вредност ЦСС боје

Ова кожа не подржава --text-shadow

gridzySkinBlur

Променљива	Подразумевана вредност	Информације
`--background`	`rgba(0, 0, 0, .7)`	дозвољава било коју ЦСС вредност позадине
`--color`	`rgb(255, 255, 255)`	дозвољава било коју вредност ЦСС боје
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	дозвољава било коју ЦСС вредност сенке текста

gridzySkinCard

Променљива	Подразумевана вредност	Информације
`--background`	`rgba(0, 0, 0, 1)`	дозвољава било коју ЦСС вредност позадине
`--color`	`rgb(255, 255, 255)`	дозвољава било коју вредност ЦСС боје
`--text-shadow`	`none`	дозвољава било коју ЦСС вредност сенке текста

Све унапред дефинисане маске подржавају само једноставне текстуалне натписе. Можете креирати сопствене и сложеније коже. Погледајте Стиле Гридзи .

Стиле Гридзи

Ако ниједна унапред дефинисана кожа не одговара вашим потребама, можете стилизовати сопствену.

Најлакши начин је да прво копирате постојећу кожу и прилагодите је својим потребама. Унапред дефинисани скин gridzySkinBlank обично би пружио добру основу као и добру документацију у ЦСС датотеци:

/** 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;
}

У ЦСС датотеци ћете пронаћи класе gridzySkinBlank , gridzyImage и gridzyCaption . Сам Гридзи не треба ове часове. Користе се само за стилизовање и тако да их можете уклонити или преименовати ако желите.

Поред тога, наћи ћете ЦСС класу gridzyItem . Гридзи аутоматски поставља ову класу свим директним потомцима главног елемента контејнера. Дакле, можете користити ову класу за стилизовање ставки ваше галерије.

Имајте на уму важне ствари

Садржај ставке треба да буде у потпуности прилагодљив. Узмите у обзир да ће се величина елемента дефинитивно променити. Користите процентуалне вредности уместо вредности пиксела. И погледајте опцију Гридзи распореда autoFontSize , која везује величину фонта за величину оквира ставке.
Свака ставка треба да има добро дефинисан однос ширине и висине. Однос слике се никада неће променити и потребан је за израчунавање мреже. Дакле, ако ставка нема аутоматски добро дефинисан однос ширине и висине, унапред је дефинишите ручно (нпр. преко цсс-а).

У неким случајевима може бити лакше стилизовати садржај ставки пре него што се Гридзи иницијализује. Једноставно уклоните класу gridzy или Гридзи јавасцрипт датотеку за ово.

То је то! То је све што вам треба да направите сопствену кожу. Већина унапред дефинисаних скинова не користи више од овога.

Али може бити више ако желите…

Адванцед Скинс

Гридзи користи више ЦСС класа него само gridzyItem . Већина њих ће бити подешена аутоматски и можете их користити и за стилизовање.

Класе главних контејнера

Име класе	Опис
`gridzy` за ручно подешавање	Гридзи аутоматски проналази елементе са овом класом и иницијализује их.
`gridzyAnimated`	Биће подешен аутоматски ако је опција `animate` `true` . Ако се ова класа подеси ручно, опција `animate` ће такође аутоматски добити `true` (осим ако је експлицитно постављена на `false` ).

Класе предмета

Име класе	Опис
`gridzyItem`	Биће подешен чим ставка започне процес иницијализације. Никада неће бити уклоњена.
`gridzyItemInitializing`	Биће подешен чим ставка започне процес иницијализације. Биће замењен са `gridzyItemReady` чим се ставка потпуно иницијализује. Не значи да су слике потпуно учитане (погледајте `gridzyItemLoading` ), али је ставка спремна да постане видљива.
`gridzyItemReady`	Замениће `gridzyItemInitializing` чим се ставка потпуно иницијализује. Никада неће бити уклоњена. Не значи да су слике потпуно учитане (погледајте `gridzyItemComplete` ), али је ставка спремна да постане видљива.
`gridzyItemLoading`	Биће подешен чим ставка започне процес иницијализације. Биће замењен са `gridzyItemComplete` чим се садржане слике (обично само једна) потпуно учитају.
`gridzyItemComplete`	Замениће `gridzyItemLoading` чим се садржане слике (обично само једна) потпуно учитају. Никада неће бити уклоњена.
`gridzyItemInitialToVisible`	Биће подешен чим ставка почне да се појављује први пут. Биће уклоњен чим ставка буде потпуно видљива.
`gridzyItemVisible`	Биће постављено чим ставка буде потпуно видљива. Биће уклоњен чим ставка почне да нестаје.
`gridzyItemVisibleToHidden`	Биће подешен чим ставка почне да нестаје. Биће уклоњен чим се ставка потпуно сакрије.
`gridzyItemHidden`	Биће постављено чим се ставка потпуно сакрије. Биће уклоњен чим ставка почне да се појављује.
`gridzyItemHiddenToVisible`	Биће постављено чим ставка почне да се појављује (осим када се појављује први пут – погледајте класу `gridzyItemInitialToVisible` ). Биће уклоњен чим ставка буде потпуно видљива.
`gridzyItemVisibleToVisible`	Биће постављено чим се нешто у мрежи промени, али је сама ставка била и остала видљива. Биће уклоњено чим се заврши анимација промене.

Подразумевано, индикатор процеса и анимације за појављивање и нестајање слика су унапред дефинисани у главном ЦСС фајлу Гридзи.

Са овим горе поменутим ЦСС класама можете стилизовати сопствени индикатор процеса и анимације. Усудите се да погледате у Гридзи главну ЦСС датотеку, да бисте разумели шта бисте морали да заобиђете. Без страха, тамо је све добро документовано.

Оптимизујте учитавање

Ако користите много слика, могла би бити добра идеја да помогнете Гридзију да брже изгради мрежу.

Спречите скакање слика

Гридзију је апсолутно потребан однос ширине и висине свих слика да би израчунао мрежу. Ова чињеница резултира скакањем елемената ако су неке слике спремне, а друге нису. Што више слика има, овај ефекат може бити досаднији.

Да бисте спречили ово понашање, само поставите атрибуте width и height за све img елементе. Важно је поставити исправне вредности за сваку појединачну слику, иначе би слике биле изобличене. Тачне вредности су оригинална ширина и висина одговарајуће слике:

<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>

Након тога Гридзи може одмах израчунати мрежу без потребе да зна стварне величине слика.

Лази Лоадинг

Да бисте учитали само слике које су у видљивом оквиру за приказ, само пратите ове кораке:

Уметните атрибуте width и height као што је горе описано (уверите се да користите исправне вредности)
Замените све src атрибуте са data-gridzylazysrc као што је приказано испод (ако имате и атрибуте srcset , замените их са 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>

Након ових корака слике ће се учитати чим се нађу у близини или унутар прозора за приказ.

Индикатор процеса

Индикатор процеса је мала анимирана икона која се појављује док се слика учитава. Ако користите титлове и скинове , индикатор процеса ће се аутоматски приказати. У супротном, потребна су вам нека подешавања:

Ставите сваки img елемент у div елемент
(или у било који други елемент – погледајте семантички ХТМЛ за више)
Додајте класу gridzyImage сваком 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>

Након тога би требало да видите индикаторе процеса ако је потребно време да се слике учитају.

Филтери

Филтери у Гридзи-у су прилично једноставни, али моћни. Без обзира какав филтер вам је потребан, врло је вероватно да је изводљив. Све што вам треба је, мало ЦСС-а и неколико ХТМЛ елемената обрасца…

Ево функционалног примера:

<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>

Хајде да га изградимо корак по корак

1. Прво нам је потребна уобичајена ХТМЛ структура Гридзи-а и подесити имена класа за све ставке галерије како бисмо их касније могли филтрирати

<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>

У овом примеру користимо само једну класу за сваки елемент. Али такође можете поставити више класа за један елемент, ако тај елемент треба да се може пронаћи преко више филтера.

2. Затим додамо неколико дугмади преко којих можемо променити филтере

<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>

Уместо дугмади, можете користити и друге елементе обрасца као што су поља за потврду, радио дугмад, поља за избор и тако даље.

Као што видите, вредности дугмади су уобичајени ЦСС селектори. Чим завршимо, клик на такво дугме ће приказати слике које одговарају том ЦСС селектору. Технички, једноставно поставља опцију filter на ову вредност.

Можете користити и много сложеније селекторе. На пример :not(.animals) би такође функционисало, као и .animals.people и .animals, .people .

3. На крају, ми инкапсулирамо дугмад у div контејнер и повезујемо их са Гридзи галеријом, постављањем опције 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>

Као што видите, такође користимо ЦСС селектор за опцију filterControls . div контејнер са атрибутом id служи само да олакша одабир дугмади преко тог ЦСС селектора.

То је то!

Ако више волите ЈаваСцрипт решење, погледајте АПИ .

АПИ

Иако Гридзи има свој АПИ, већина ствари се може урадити без њега, једноставно манипулисањем ДОМ-ом. Гридзи ће то приметити и подесити мрежу. Али постоји и веома моћан АПИ…

Манипулисање ДОМ-ом

За све манипулације модела објекта документа (ДОМ) прво нам је потребан елемент контејнера:

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

Додај слике

Важно је да у потпуности направите и попуните нови подређени елемент пре него што га додате елементу контејнера. Иначе Гридзи не може да открије тачне димензије.

// 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);

Уклоните слике

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

Цханге Оптионс

// 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');

Више о манипулисању ДОМ-ом можете пронаћи у МДН веб документима . Доступан је и Увод у ДОМ .

Власнички АПИ

Да бисмо користили АПИ, прво нам је потребна Гридзи инстанца, која је везана за елемент контејнера Гридзи:

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

Гет Оптион

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

Преузмите све опције

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

Подесите опције

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

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

Примени филтер

Примена филтера је само постављање filter опција који може бити било који важећи ЦСС селектор:

// 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'
});

Додајте функције повратног позива

ЗАСТАРЕЛО од верзије 2.4.0
Уместо тога користите модерне и флексибилније догађаје . Погледајте следећи одељак за детаље.

Гридзи.јс 2 подржава неке опције за функције повратног позива. Могу се подесити само преко власничког АПИ-ја, али баш као и друге опције:

// 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.
  }
});

	~~Опис~~
~~`onBeforeOptionsChanged`~~	~~Функција повратног позива која се позива директно пре подешавања опција.~~
~~`onOptionsChanged`~~	~~Функција повратног позива која се позива директно након подешавања опција.~~
~~`onBeforeRender`~~	~~Функција повратног позива која се позива директно пре рендеровања.~~
~~`onRender`~~	~~Функција повратног позива која се позива директно након рендеровања.~~

Користите догађаје

од верзије 2.4.0

Можете користити Гридзи догађаје баш као и уобичајене ЈаваСцрипт догађаје:

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.
});

Неки догађаји се покрећу на елементу контејнера Гридзи, а други догађаји се покрећу на појединачним елементима ставке унутар елемента контејнера.

Догађаји покренути на елементу контејнера Гридзи:

	Опис
`gridzyBeforeInit`	Пали се пре иницијализације галерије.
`gridzyInit`	Пали се након иницијализације галерије.
`gridzyBeforeOptionsChanged`	Пали пре подешавања опција.
`gridzyOptionsChanged`	Пали се након подешавања опција.
`gridzyBeforeRender`	Пали пре рендеровања.
`gridzyRender`	Пали након рендеровања.

Ако пропустите неки догађај овде, пошаљите захтев за подршку .

event.target обезбеђује елемент контејнера Гридзи.
event.detail.instance обезбеђује Гридзи инстанцу.

Догађаји покренути на елементима ставке:

	Опис
`gridzyItemBeforeInit`	Пали се пре иницијализације ставке.
`gridzyItemInit`	Пали се након иницијализације ставке.
`gridzyItemLoading`	Пали се када ставка почне да се учитава.
`gridzyItemReady`	Пали се када је ставка спремна за прорачун мреже. Дакле, однос ширине и висине је познат, али слика се можда и даље учитава.
`gridzyItemComplete`	Покреће се када је слика ставке потпуно учитана.

Ако пропустите неки догађај овде, пошаљите захтев за подршку .

event.target обезбеђује одговарајући елемент ставке.
event.detail.instance обезбеђује Гридзи инстанцу.

АПИ – Глобал

Постоје неке функције које су независне од Гридзи инстанци. Дакле, не морамо да добијемо инстанцу раније.

Добијте подразумевану опцију

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

Преузмите све подразумеване опције

// 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');

Подесите подразумеване опције

Ово не поставља опције за све већ иницијализоване Гридзи инстанце, већ дефинише основу за нове инстанце. Међутим, ако би опција постојеће инстанце била ресетована преко вредности null , користила би се нова подразумевана вредност.

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

Ово можете користити за глобално подешавање опција, ако га позовете пре него што ДОМ буде спреман. Дакле, више не бисте морали да постављате опције као атрибуте.

Аутоматизми

Све док су сви аутоматизми Гридзи.јс 2 активни, нема потребе за доле наведеним методама. Али аутоматизми се могу искључити да би се Гридзи користио на традиционалнији начин:

// 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
});

Неке од ових опција не могу да се подесе преко data-gridzy- атрибута или преко setOptions() из логичних разлога:

	Подразумевана вредност	Опис
`autoInitOnDomReady`	`true`	Детектује елементе са класом `gridzy` при учитавању странице и иницијализује их. Подесиво преко `Gridzy.setDefaultOptions()`
`autoInitOnDomMutation` МутатионОбсервер	`true`	Детектује нове елементе са класом `gridzy` чим се појаве у ДОМ-у и иницијализује их. (нпр. о коришћењу прелаза страница) Подесиво преко `Gridzy.setDefaultOptions()`
`autoSyncChildListMutation` МутатионОбсервер	`true`	Открива да ли се подређени елементи (слике) додају или уклањају и аутоматски ажурира мрежу. Подесиво преко `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	Дефинише да ли се атрибути `data-gridzy-` генерално користе или не. Ако је ово `false` опције се могу подесити само преко власничког АПИ-ја. Подесиво преко `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` МутатионОбсервер	`true`	Открива промене атрибута `data-gridzy-` и аутоматски ажурира мрежу. Такође открива да ли је класа `gridzyAnimated` додата или уклоњена и да ли долази до промена атрибута `style` . Ако је `useOptionAttributes` `false` , детектује само промене атрибута `style` . Подесиво преко `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` МутатионОбсервер	`true`	Детектује промене атрибута `class` свих подређених елемената (слика). Релевантно у вези са филтерима. Подесиво преко `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` МутатионОбсервер од верзије 2.5.0	`true`	Детектује промене `src` атрибута свих слика. Релевантно када се користи са Реацт или сличним библиотекама. Подесиво преко `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` РесизеОбсервер од верзије 2.6.0	`true`	Детектује промене ширине елемента. Релевантно у вези са респонзивним дизајном. (Пре верзије 2.6.0 коришћен је слушалац догађаја промене величине прозора) Подесиво преко `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Иницијализујте ручно

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

Уништите инстанцу

Грубо речено, супротно од иницијализације Гридзија.

gridzyInstance.destroy();
gridzyInstance = null;

Ручно синхронизујте подређену листу

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

Ручно синхронизујте један подређени елемент

Обично није потребно, осим у веома ретким случајевима.

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

Ручно синхронизујте атрибуте

Имајте на уму да опција useOptionAttributes мора бити true за ово.

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

Форце Рендеринг

Обично није потребно, чак и ако су сви аутоматизми искључени

gridzyInstance.render();

ВордПресс додатак

ЈаваСцрипт библиотека

Услуга