2.x версия – Gridzy.Gallery

Сайт вылын автоматическöя вуджöдöма. Мыйкӧ кӧ абу гӧгӧрвоана, видзӧдлӧй англия кывъя документация вылӧ.

Основнӧй использование .

Гридзы файлӧвӧй тэчасъяссӧ лэдзӧй асланыд сервер вылӧ да содтӧй найӧс асланыд сайтӧ (тшӧкыда юр юкӧнӧ):

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

Содты HTML-код (кӧнікӧ тэчас юкӧнӧ):

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

Вот сійӧ! Тайӧ тырвыйӧ функциональнӧй пример. Некутшӧм лишнӧй инициализация оз ков.

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

Медся кокни ногӧн настроитны Gridzy - тайӧ, медым сӧмын вӧдитчыны HTML атрибутъясӧн. Колӧ сӧмын вариант нимъяс водзын пуктыны 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`	Определитö вöдитчан раскладка. Gridzy.js 2 отсалӧ кык торъя макетлы `justified` да `waterfall` . Быдӧнлӧн эм аслас содтӧд вариант параметръяс, кодъясӧс позьӧ аддзыны тайӧ таблица улын.
`filter`	`*`	Тӧдчӧдӧ, кутшӧм серпасъяс колӧ петкӧдлыны. Тані значение пыдди позьӧ вӧдитчыны любӧй CSS-селекторӧн. Ӧдйӧджык пуктӧны автоматическӧй `filterControls` пыр (видзӧд мӧд вариант). Видзӧдлӧй Фильтръяс вылӧ .
`filterControls`		Тӧдчӧдӧ, кутшӧм форма элементъясӧн позьӧ фильтруйтны серпасъяс. Тані значениеӧн позьӧ вӧдитчыны любӧй CSS селекторӧн, коді бӧрйӧ HTML форма элементъяс. Видзӧдлӧй Фильтръяс вылӧ .
`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`.

Унджык вариантъяс .

Унджык вариантъяс вылӧ видзӧдӧй API .

Семантическӧй HTML .

Гридзилӧн медся прӧстӧй HTML структураыс тайӧ:

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

Но Gridzy зэв гибкӧй да позьӧ вӧдитчыны пӧшти быд мукӧд HTML структураӧн. Эм сӧмын некымын пункт, кодъясӧс колӧ видлавны:

Контейнер элементлӧн быд кага петкӧдлӧ сетчаткаын ӧти пункт.
И контейнер элемент, и сылӧн челядь вермасны лоны любӧй тег типӧн, шуам, ul да li (сӧмын мӧвпыштӧй сброситны браузерлысь умолчаниеяссӧ).
img элемент кӧ абу ачыс веськыд кага, сылы колӧ класс gridzyImage .

Сідзкӧ тайӧ тшӧтш уджалан 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>

Торйӧн нин, кӧсъянныд кӧ содтыны титръяс, колӧ сӧвмӧм HTML структура. Медым тӧдмавны та йылысь унджык, видзӧдлӧй Captions & Skins .

Капцияяс да шӧринъяс

Кӧсъянныд кӧ содтыны асланыд галереяӧ титръяс, колӧ гӧгӧрвоӧдны видлӧгсӧ. Сідзкӧ, эмӧсь кутшӧмкӧ водзвыв урчитӧм шкуръяс. Быд шӧрин артмӧ CSS-файлысь. Колӧ содтыны тайӧ файлсӧ шӧр Gridzy файлъясысь кындзи (тшӧкыда юр юкӧнӧ):

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

Сэсся колӧ сӧвмӧдны 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>

Ті кӧ шензянныд HTML тэчас йылысь, видзӧдлӧй Semantic HTML .

Капция вылӧ позьӧ вӧдитчыны любӧй сикас тегӧн, сӧмын гӧгӧрвоӧдӧй, мый сылӧн эм класс 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 версиясянь бырӧма)

Став татшӧм шӧринъяслы колӧ сӧмын CSS-файл, но эмӧсь содтӧд шӧринъяс, кодъяслы тшӧтш колӧ JavaScript-файл:

<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 версиясянь эмӧсь Параметръяс, медым настроитны пытшкӧсса шӧринъяс. Конкретнӧй шӧрин серти позьӧ пуктыны фон рӧм, текст рӧм да текст рӧм. Колӧ сӧмын вӧдитчыны CSS-лӧн пользовательскӧй свойствоясӧн, кыдзи ті аддзанныд татысь:

<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)`	лэдзӧ любӧй CSS фон значение .
`--color`	`rgb(255, 255, 255)`	лэдзӧ любӧй CSS рӧма значение .
`--text-shadow`	`none`	лэдзӧ любӧй CSS текст-тен значение .

gridzySkinFullOverlay

Переменнӧй	Значение по умолчанию	Юӧр
`--background`	`rgba(0, 0, 0, .7)`	лэдзӧ любӧй CSS фон значение .
`--color`	`rgb(255, 255, 255)`	лэдзӧ любӧй CSS рӧма значение .
`--text-shadow`	`none`	лэдзӧ любӧй CSS текст-тен значение .

gridzySkinLift

Переменнӧй	Значение по умолчанию	Юӧр
`--background`	`rgba(0, 0, 0, .7)`	лэдзӧ любӧй CSS фон значение .
`--color`	`rgb(255, 255, 255)`	лэдзӧ любӧй CSS рӧма значение .
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	лэдзӧ любӧй CSS текст-тен значение .

gridzySkinMagnifier

Переменнӧй	Значение по умолчанию	Юӧр
`--background`	`rgba(0, 0, 0, .7)`	лэдзӧ любӧй CSS фон значение .
`--color`	`rgb(255, 255, 255)`	лэдзӧ любӧй CSS рӧма значение .

Тайӧ шӧрыс оз лӧсяв --text-shadow

gridzySkinBlur

Переменнӧй	Значение по умолчанию	Юӧр
`--background`	`rgba(0, 0, 0, .7)`	лэдзӧ любӧй CSS фон значение .
`--color`	`rgb(255, 255, 255)`	лэдзӧ любӧй CSS рӧма значение .
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	лэдзӧ любӧй CSS текст-тен значение .

gridzySkinCard

Переменнӧй	Значение по умолчанию	Юӧр
`--background`	`rgba(0, 0, 0, 1)`	лэдзӧ любӧй CSS фон значение .
`--color`	`rgb(255, 255, 255)`	лэдзӧ любӧй CSS рӧма значение .
`--text-shadow`	`none`	лэдзӧ любӧй CSS текст-тен значение .

Став водзвыв лӧсьӧдӧм скинъясыс сӧмын отсалӧны прӧстӧй текста титръяслы. Позьӧ лӧсьӧдны ассьыд зэв аслыспӧлӧс да сложнӧйджык шӧринъяс. Пожалуйста, видзӧдлӧй Стиль Гридзи вылӧ .

Стиль Гридзи .

Некутшӧм водзвыв урчитӧм юрси кӧ оз лӧсяв тіян нуждаяслы, позьӧ лӧсьӧдны ассьыныд юрси.

Медся кокниыс — медводз копируйтны эм шкур да лӧсьӧдны аслыд колана ногӧн. Водзвыв лӧсьӧдӧм шкур gridzySkinBlank тшӧкыда эськӧ сетӧ бур подув, а сідзжӧ бур документация 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;
}

CSS-файлысь ті аддзанныд классъяс gridzySkinBlank , gridzyImage да gridzyCaption . Гридзлы аслыс тайö классъясыс оз ковны. Найӧ сӧмын стильяс лӧсьӧдӧм могысь да сідзкӧ ті верманныд найӧс бырӧдны либӧ нимтыны, кӧсъянныд кӧ.

Та кындзи ті аддзанныд CSS класс gridzyItem . Гридзи автоматическöя пуктö тайö класссö шöр контейнер элементлöн став веськыд челядьлы. Сідзкӧ, ті верманныд вӧдитчыны тайӧ классӧн, медым стилизируйтны асланыд галереяысь предметъяс.

Ум Важӧн нин .

Пункт содержаниеыс мед лоас тырвыйӧ лӧсяланаӧн. Лыддьӧй, мый элементлӧн ыдждаыс дзик пыр вежсяс. Пиксельяс пыдди колӧ вӧдитчыны процентъясӧн. И видзӧдлӧй Gridzy макет вариант вылӧ autoFontSize , коді йитӧ шрифт-размерсӧ пункт ӧшинь ыджда вылӧ.
Быд пунктлы колӧ лоны бура лӧсьӧдӧм формаӧн. Элементлӧн форматыс некор оз вежсьы да колӧ сетчатка урчитӧм могысь. Сідзкӧ, элементлӧн кӧ автоматическӧй ногӧн абу бура лӧсьӧдӧм формат, лӧсьӧдӧй сійӧс водзвыв киӧн (шуам, css пыр).

Мукӧд случайын вермас лоны кокньыдджык стилизируйтны элементъяслысь содержаниесӧ Гридзи инициализируйтӧм бӧрын. Прӧста бырӧдӧй класс gridzy либӧ Gridzy javascript файл кад кежлӧ та могысь.

Вот сійӧ! Тайӧ ставыс колӧ, медым лӧсьӧдны ассьыд зэв аслыспӧлӧс юрситӧ. Унджык водзвыв лӧсьӧдӧм шӧринъясын оз ёнджыка вӧдитчыны, мый тайӧ.

Но вермас лоны унджык, кӧсъянныд кӧ ...

Адванс шӧринъяс .

Gridzy ёнджыка вӧдитчӧ CSS классъясӧн, сӧмын 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`	Будет установлено как только что-то в сетке изменилось, но сам пункт был и остается видимым. Будет удален, кыдзи сӧмын помасяс вежсьӧм анимация.

По умолчанию процесс индикатор да петысь да бырысь серпасъяс вылӧ анимацияяс водзвыв урчитӧма Gridzy шӧр CSS файлӧн.

Тайӧ водзын висьталӧм CSS классъясӧн позьӧ стилизируйтны ассьыд процесс индикатор да анимацияяс. Смела видзӧдлыны Gridzy шӧр CSS-файлӧ, медым гӧгӧрвоны, мый тэныд эськӧ ковмис бырӧдны. Некутшӧм повтӧмлун абу, ставыс сэні бура документируйтӧма.

Оптимизируйтны загрузка .

Уна серпасӧн кӧ вӧдитчанныд, вермас лоны бур мӧвпӧн отсавны Гридзлы ӧдйӧджык лӧсьӧдны сетчатка.

Предотвратить скачок изображений .

Гридзлы абсолютнӧ колӧ став серпасъяслӧн форматыс, медым сетчаткасӧ урчитны. Тайӧ фактъясыс вайӧдӧны скачущӧй элементъясӧ, кутшӧмкӧ образъяс кӧ дасьӧсь, а мукӧдыс абуӧсь. Кымын унджык образыс, сымын ёнджыка дразнитӧ вермас лоны тайӧ эффектыс.

Медым тайö поводдяыс эз ло, колö став img элементъяслы пуктыны width да height атрибутъяс. Колӧ быд торъя серпас вылӧ лӧсьӧдны колана донъяс, мӧд ногӧн серпасъясыс лоасны омӧльӧсь. Правильнӧй значениеясыс — первойя пасьтаыс да ыдждаыс соответствующӧй серпаслӧн:

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

Тайӧ воськовъяс бӧрын серпасъясыс лоасны лэдзӧмаӧсь сідз жӧ, кыдзи найӧ лоасны видзӧдланін дорын либӧ пытшкын.

Процесс индикатор .

Процесс индикатор — тайӧ неыджыд анимационнӧй значок, коді петӧ серпас лэдзӧм дырйи. Ті кӧ вӧдитчанныд captions & skins , процесс индикаторыс петкӧдчас автоматическӧй ногӧн. Мӧд-кӧ, колӧ кутшӧмкӧ лӧсьӧдчӧмъяс:

Быд img элемент пуктӧй div элементӧ .
(либӧ кутшӧмкӧ мӧд элементӧ – видзӧд семантическӧй HTML ёнджыка)
Быд img элемент дорӧ содты gridzyImage класс .

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

Та бöрын колö аддзыны процесс индикаторъяс, серпасъяс кö босьтöны кад загрузитчыны.

Фильтръяс

Гридзын фильтръяс зэв прӧстӧйӧсь, но вынаӧсь. Кӧть кутшӧм фильтр колӧ, зэв ёна чайтӧны, мый сійӧ реализуйтана. Ставыс, мый колӧ, ичӧт CSS да некымын HTML форма элемент ...

Тані функциональнӧй пример:

<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. Медводз колӧ Gridzy-лӧн ӧтувъя HTML структура да пуктыны класс нимъяс став галерея элементъяслы, медым ми вермим найӧс фильтруйтны сэсся .

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

Кнопкаяс пыдди позис тшӧтш вӧдитчыны мукӧд форма элементъясӧн, кыдзи гаечъяс, радиокнопкаяс, бӧрйӧм юкӧнъяс да с.в.

Кыдзи ті аддзанныд, кнопкаяслӧн значениеясыс лоӧны тшӧкыда паныдасьлысь CSS селекторъясӧн. Кыдзи сӧмын ми помалам, татшӧм кнопка вылӧ ӧшӧдӧмӧн петасны серпасъяс, кодъяс лӧсялӧны сійӧ CSS селекторыслы. Техника боксянь сійӧ прӧста пуктӧ filter вариантсӧ тайӧ значение вылӧ.

Сідзжӧ позьӧ вӧдитчыны ёна сложнӧйджык селекторъясӧн. Шуам :not(.animals) эськӧ уджалісны тшӧтш, кыдзи и .animals.people да .animals, .people .

3. Медбӧръяысь ми кнопкаяссӧ инкапсулируйтам div контейнерӧ да йитам найӧс Gridzy галереякӧд, 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>

Кыдзи ті аддзанныд, ми тшӧтш вӧдитчам CSS селекторӧн filterControls вариант вылӧ. id атрибутӧн div контейнер служитӧ сӧмын сы могысь, медым кнопкаяссӧ кокньыдджыка бӧрйыны сійӧ CSS бӧрйысь пыр.

Вот сійӧ!

Ті кӧ ёнджыка кӧсъянныд JavaScript решение, видзӧдлӧй API .

API

Кӧть и Gridzy-лӧн эм аслас API, унджык уджсӧ позьӧ нуӧдны сытӧг, сӧмын DOM-ӧн манипулируйтӧмӧн. Гридзыс казялас сійӧс да лӧсьӧдас сетчаткасӧ. Но эм нӧшта зэв вына API ...

ДОМ-ӧн манипулируйтӧм .

Став Document Object Model (DOM) манипуляцияяс вылӧ миянлы медводз колӧ контейнер элемент:

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

DOM-ӧн манипуляцияяс йылысь ёнджыка позьӧ аддзыны MDN web docs . Сідзжӧ эм Введение в ДОМ доступен.

Собственнӧй API .

Медым вӧдитчыны API-ӧн, миянлы медводз колӧ Gridzy экземпляр, коді йитчӧма Gridzy контейнер элементкӧд:

// 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 пуктӧм, коді вермас лоны любӧй действительнӧй 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'
});

Содты ӧтувъя звӧнок функцияяс .

2.4.0 версиясянь бырӧма.
Сы пыдди колӧ вӧдитчыны ӧнія кадся да ёна сӧстӧмджык Событиеясӧн . Видзӧдӧй мӧд юкӧнысь ёнджыка.

Gridzy.js 2 отсалӧ кутшӧмкӧ вариантъяслы обратнӧй звӧнок функцияяс вылӧ. Найӧс позьӧ пуктыны сӧмын собственнӧй API пыр, но дзик мукӧд вариантъяс моз:

// 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 версиясянь

Ті верманныд вӧдитчыны Gridzy событиеясӧн дзик ӧткодь 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.
});

Мукӧд событиеяс лэдзӧны Гридзи контейнер элемент вылын, а мукӧд событиеяс лэдзӧны контейнер элемент пытшкын торъя пункт элементъяс вылын.

Гридзы контейнер элемент вылын ӧзйӧм событиеяс:

	Серпасалӧм
`gridzyBeforeInit`	Галерея инициализация бӧрын пӧжаръяс.
`gridzyInit`	Галерея инициализация бӧрын пӧжаръяс.
`gridzyBeforeOptionsChanged`	Вариантъяс пуктӧм бӧрын ӧзйӧ.
`gridzyOptionsChanged`	Пӧжаръяс бӧрын настройка вариантъяс.
`gridzyBeforeRender`	Рендеринг бӧрын пӧжаръяс.
`gridzyRender`	Рендеринг бӧрын пӧжаръяс.

Ті кӧ кольӧмаӧсь татчӧ кутшӧмкӧ мероприятиеяс, ыстыны отсӧг вылӧ корӧм .

event.target сетö Gridzy контейнер элемент.
event.detail.instance сетö Гридзы экземпляр.

Пункт элементъяс вылын стрӧитӧм событиеяс:

	Серпасалӧм
`gridzyItemBeforeInit`	Элемент инициализация бӧрын ӧзйӧ.
`gridzyItemInit`	Элемент инициализация бӧрын ӧзйӧ.
`gridzyItemLoading`	Пӧжаръяс, кор предметыс заводитӧ загрузитчыны.
`gridzyItemReady`	Пӧжаръяс, кор предметыс дась сетчатӧй расчёт вылӧ. Сідзкӧ форматыс тӧдса, но серпасыс вермас лоны нагрузкаӧн.
`gridzyItemComplete`	Пӧжар, кор пункт образыс тырвыйӧ тыртӧма.

Ті кӧ кольӧмаӧсь татчӧ кутшӧмкӧ мероприятиеяс, ыстыны отсӧг вылӧ корӧм .

event.target сетö лöсялана пункт элемент.
event.detail.instance сетö Гридзы экземпляр.

API – Глобальнӧй .

Эмӧсь кутшӧмкӧ функцияяс, кодъяс абу йитчӧмаӧсь Гридзы экземпляръяскӧд. Сідзкӧ миянлы оз ков босьтны инстанция водзджык.

Получить вариант по умолчанию .

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

Установитны параметръяс умолчание серти .

Тайӧ оз пукты став нин инициализируйтӧм Gridzy экземпляръяслысь вариантъяссӧ, но урчитӧ выль экземпляръяслы подув. Но ӧнія экземплярлӧн опцияыс кӧ эськӧ лоис сброситӧм null значение пыр, сійӧ эськӧ вӧдитчис выль значениеӧн умолчание серти.

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

Тайӧн позьӧ вӧдитчыны глобальнӧя параметръяс пуктӧм могысь, звӧнитін кӧ сылы DOM дась лоӧм бӧрын. Сідзкӧ, тіянлы эськӧ эз нин ковмы пуктыны опцияяссӧ атрибутъясӧн.

Автоматизмъяс

Пока Gridzy.js 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` -ӧн, кыдзи сӧмын найӧ петӧны DOM-ын да инициализируйтӧ найӧс. (шуам, лист бок вуджӧмъясӧн вӧдитчӧм йылысь) Установитны позьӧ `Gridzy.setDefaultOptions()`
`autoSyncChildListMutation` Мутацияяс видзӧдысь	`true`	Тӧдмалӧ, содтӧны-ӧ либӧ бырӧдӧны-ӧ челядь элементъяс (серпасъяс), да выльмӧдӧ сеткасӧ автоматическӧй ногӧн. Установка через `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	Тӧдчӧдӧ, `data-gridzy-` атрибутъясӧн ӧтувъя либӧ абу. Тайӧ кӧ `false` вариантъяс позьӧ пуктыны сӧмын собственнӧй API пыр. Установитны позьӧ `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` атрибутъяслысь вежсьӧмъяссӧ. Актуальнӧй, кор вӧдитчӧны React либӧ татшӧм сяма библиотекаяскӧд. Установка через `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();

Вордпресс плагин

JavaScript библиотека .

Служба