Gridzy.Gallery

web한국어는

버전 2.x

웹사이트는 자동으로 번역되었습니다. 명확하지 않은 부분이 있으면 영어 문서를 살펴보세요.

기본 사용법

Gridzy 파일을 서버에 업로드하고 웹사이트에 추가합니다(일반적으로 헤드 섹션에):

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

주요 옵션

기본값설명
animatetrue그리드가 변경될 때(예: 브라우저 창 크기를 조정할 때, 필터를 설정할 때) 애니메이션을 사용할지 여부를 결정합니다.
layoutjustified사용된 레이아웃을 정의합니다. Gridzy.js 2는 두 가지 다른 레이아웃 justified 와 waterfall 를 지원합니다. 각각에는 고유한 추가 옵션 매개변수가 있으며, 이 표 아래에서 찾을 수 있습니다.
filter*어떤 이미지를 표시할지 결정합니다. 모든 CSS 선택기를 여기서 값으로 사용할 수 있습니다. 일반적으로 filterControls 통해 자동으로 설정됩니다(다음 옵션 참조).
필터 확인
filterControls이미지를 필터링하는 데 사용할 수 있는 폼 요소를 결정합니다. HTML 폼 요소를 선택하는 모든 CSS 선택자는 여기서 값으로 사용할 수 있습니다.
필터 확인
autoConsiderScrollBarstrue스크롤 바가 나타나거나 사라질 경우 사용 가능한 너비를 예측합니다. 이 자동화가 문제를 일으키지 않는 한 항상 true 로 두는 것이 좋습니다.

Justified 레이아웃 옵션

기본값설명
autoFontSizefalse원래 상자 크기에 따라 각 상자의 글꼴 크기 속성을 자동으로 업데이트합니다. 기본적으로 글꼴 크기 속성은 명시적으로 설정되지 않습니다.
desiredHeight190원하는 요소 행의 높이를 정의합니다. 실제 높이는 사용 가능한 너비와 행의 요소에 따라 계산됩니다.
hideOnMissingImagetrue로드할 수 없는 이미지가 담긴 상자를 숨깁니다.
spaceBetween4요소 사이의 거리를 픽셀 단위로 정의합니다.
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 레이아웃 옵션

기본값설명
autoFontSizefalse원래 상자 크기에 따라 각 상자의 글꼴 크기 속성을 자동으로 업데이트합니다. 기본적으로 글꼴 크기 속성은 명시적으로 설정되지 않습니다.
desiredWidth250원하는 열 너비를 정의합니다. 실제 너비는 사용 가능한 너비와 열 수에 따라 계산됩니다.
hideOnMissingImagetrue로드할 수 없는 이미지가 담긴 상자를 숨깁니다.
horizontalOrderfalse요소가 각 열에 왼쪽에서 오른쪽으로 엄격하게 하나의 요소로 배치되고, 어느 열이 더 많은 위치에 있는지와 무관하게 가장 왼쪽 열에서 다시 시작하도록 정의합니다. 기본적으로 요소는 항상 가장 작은 높이의 열에 배치됩니다.
spaceBetween4요소 사이의 거리를 픽셀 단위로 정의합니다.
singleRowAlign
since version 2.7.0		justifiedDefines the behavior when not all columns can be filled due to too few images. Allowed values are left, center, right and justified.

더욱 고급 옵션

더욱 고급 옵션을 알아보려면 API를 확인하세요.

의미론적 HTML

Gridzy의 가장 간단한 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 파일(일반적으로 head 섹션에 있음) 외에도 이 파일을 추가해야 합니다.

<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 구조가 궁금하다면 의미론적 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
IE에서는 작동하지 않습니다
라이브 미리보기		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
변하기 쉬운기본값정보
--backgroundrgba(0, 0, 0, .7)모든 CSS 배경 값을 허용합니다
--colorrgb(255, 255, 255)모든 CSS 색상 값을 허용합니다
--text-shadownone모든 CSS 텍스트 그림자 값을 허용합니다.
gridzySkinFullOverlay
변하기 쉬운기본값정보
--backgroundrgba(0, 0, 0, .7)모든 CSS 배경 값을 허용합니다
--colorrgb(255, 255, 255)모든 CSS 색상 값을 허용합니다
--text-shadownone모든 CSS 텍스트 그림자 값을 허용합니다.
gridzySkinLift
변하기 쉬운기본값정보
--backgroundrgba(0, 0, 0, .7)모든 CSS 배경 값을 허용합니다
--colorrgb(255, 255, 255)모든 CSS 색상 값을 허용합니다
--text-shadow0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)모든 CSS 텍스트 그림자 값을 허용합니다.
gridzySkinMagnifier
변하기 쉬운기본값정보
--backgroundrgba(0, 0, 0, .7)모든 CSS 배경 값을 허용합니다
--colorrgb(255, 255, 255)모든 CSS 색상 값을 허용합니다

이 스킨은 --text-shadow 지원하지 않습니다.

gridzySkinBlur
변하기 쉬운기본값정보
--backgroundrgba(0, 0, 0, .7)모든 CSS 배경 값을 허용합니다
--colorrgb(255, 255, 255)모든 CSS 색상 값을 허용합니다
--text-shadow0 0 10px rgb(0, 0, 0)모든 CSS 텍스트 그림자 값을 허용합니다.
gridzySkinCard
변하기 쉬운기본값정보
--backgroundrgba(0, 0, 0, 1)모든 CSS 배경 값을 허용합니다
--colorrgb(255, 255, 255)모든 CSS 색상 값을 허용합니다
--text-shadownone모든 CSS 텍스트 그림자 값을 허용합니다.

모든 사전 정의된 스킨은 간단한 텍스트 캡션만 지원합니다. 아주 복잡한 스킨을 직접 만들 수 있습니다. Style Gridzy 를 살펴보세요.

스타일 그리지

필요에 맞는 미리 정의된 스킨이 없다면, 직접 스타일을 지정할 수 있습니다.

가장 쉬운 방법은 먼저 기존 스킨을 복사하여 자신의 필요에 맞게 조정하는 것입니다. 미리 정의된 스킨 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 클래스를 찾을 수 있습니다. Gridzy 자체에는 이러한 클래스가 필요하지 않습니다. 스타일링에만 사용되므로 원하는 경우 제거하거나 이름을 바꿀 수 있습니다.

또한 CSS 클래스 gridzyItem 찾을 수 있습니다. Gridzy는 이 클래스를 자동으로 메인 컨테이너 요소의 모든 직계 자식으로 설정합니다. 따라서 이 클래스를 사용하여 갤러리 항목의 스타일을 지정할 수 있습니다.

중요한 것들을 염두에 두세요

  1. 아이템 콘텐츠는 완전히 반응형이어야 합니다. 요소 크기가 확실히 변경될 것이라는 점을 고려하세요. 픽셀 값 대신 백분율 값을 사용하세요. 그리고 글꼴 크기를 아이템 상자 크기에 바인딩하는 Gridzy 레이아웃 옵션 autoFontSize 를 살펴보세요.
  2. 각 항목은 잘 정의된 종횡비를 가져야 합니다. 항목의 종횡비는 절대 변경되지 않으며 그리드를 계산하는 데 필요합니다. 따라서 항목에 자동으로 잘 정의된 종횡비가 없는 경우 수동으로 미리 정의합니다(예: css를 통해).

어떤 경우에는 Gridzy가 초기화되기 전에 항목의 내용을 스타일링하는 것이 더 쉬울 수 있습니다. 이를 위해 클래스 gridzy 나 Gridzy 자바스크립트 파일을 일시적으로 제거하면 됩니다.

그게 전부입니다! 이게 바로 당신만의 스킨을 만드는 데 필요한 전부입니다. 대부분의 사전 정의된 스킨은 이것보다 더 많이 사용하지 않습니다.

하지만 원하시면 더 많은 것을 추가하실 수 있습니다…

고급 스킨

Gridzy는 gridzyItem 보다 더 많은 CSS 클래스를 사용합니다. 대부분은 자동으로 설정되며 스타일링에도 사용할 수 있습니다.

주요 컨테이너 클래스

클래스 이름설명
gridzy
수동으로 설정하려면		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 파일을 살펴보고 무엇을 오버라이드해야 할지 이해해 보세요. 걱정하지 마세요. 모든 것이 잘 문서화되어 있습니다.

로딩 최적화

많은 이미지를 사용하는 경우 Gridzy가 그리드를 더 빨리 구축하도록 돕는 것이 좋습니다.

점프 이미지 방지

Gridzy는 그리드를 계산하기 위해 모든 이미지의 종횡비가 절대적으로 필요합니다. 이러한 사실은 일부 이미지가 준비되고 다른 이미지가 준비되지 않은 경우 요소가 점프하는 결과를 낳습니다. 이미지가 많을수록 이 효과는 더 성가실 수 있습니다.

이 동작을 방지하려면 모든 img 요소에 대해 width 및 height 속성을 설정하기만 하면 됩니다. 각 개별 이미지에 대해 올바른 값을 설정하는 것이 중요합니다. 그렇지 않으면 이미지가 왜곡됩니다. 올바른 값은 해당 이미지의 원래 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>

그 이후로 Gridzy는 이미지의 실제 크기를 알 필요 없이 즉시 격자를 계산할 수 있습니다.

레이지 로딩

보이는 뷰포트에 있는 이미지만 로드하려면 다음 단계를 따르세요.

  1. 위에 설명된 대로 width 및 height 속성을 삽입합니다(올바른 값을 사용해야 함)
  2. 아래에 표시된 대로 모든 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>

이러한 단계를 거치면 이미지가 뷰포트 근처나 뷰포트 내부에 들어오자마자 로드됩니다.

프로세스 표시기

프로세스 표시기는 이미지가 로딩되는 동안 나타나는 작은 애니메이션 아이콘입니다. 캡션 및 스킨을 사용하는 경우 프로세스 표시기가 자동으로 표시됩니다. 그렇지 않으면 몇 가지 조정이 필요합니다.

  1. 각 img 요소를 div 요소에 넣으세요
    (또는 다른 요소로 - 자세한 내용은 의미론적 HTML 참조)
  2. 각 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>

그 후, 이미지 로드에 시간이 걸리는 경우 프로세스 표시기가 나타납니다.

필터

Gridzy의 필터는 매우 간단하지만 강력합니다. 어떤 종류의 필터가 필요하든 실현 가능할 가능성이 매우 높습니다. 필요한 것은 약간의 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. 마지막으로, filterControls 옵션을 설정하여 버튼을 div 컨테이너에 캡슐화하고 Gridzy 갤러리에 바인딩합니다.

<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 옵션에 CSS 선택기를 사용합니다. id 속성이 있는 div 컨테이너는 CSS 선택기를 통해 버튼을 더 쉽게 선택할 수 있도록 하는 데에만 사용됩니다.

다 됐어요!

JavaScript 솔루션을 선호하시는 경우 API 를 확인하세요.

API

Gridzy는 자체 API가 있지만 대부분의 작업은 DOM을 조작하는 것만으로 API 없이도 수행할 수 있습니다. Gridzy는 이를 알아차리고 그리드를 조정합니다. 하지만 매우 강력한 API도 있습니다...

DOM 조작

모든 문서 개체 모델(DOM) 조작을 위해서는 먼저 컨테이너 요소가 필요합니다.

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

이미지 추가

컨테이너 요소에 추가하기 전에 새 자식 요소를 완전히 빌드하고 채우는 것이 중요합니다. 그렇지 않으면 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 웹 문서 에서 찾을 수 있습니다. DOM 소개 도 제공됩니다.

독점 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
});

필터 적용

필터를 적용하는 것은 유효한 CSS 선택자가 될 수 있는 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부터 더 이상 사용되지 않음
대신 현대적이고 유연한 이벤트를 사용하세요. 자세한 내용은 다음 섹션을 참조하세요.

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

일부 이벤트는 Gridzy 컨테이너 요소에서 발생하고, 다른 이벤트는 컨테이너 요소 내의 개별 항목 요소에서 발생합니다.

Gridzy 컨테이너 요소에서 발생한 이벤트:

설명
gridzyBeforeInit갤러리가 초기화되기 전에 발생합니다.
gridzyInit갤러리 초기화 후 발생합니다.
gridzyBeforeOptionsChanged옵션을 설정하기 전에 실행됩니다.
gridzyOptionsChanged옵션을 설정한 후 실행됩니다.
gridzyBeforeRender렌더링 전에 화재가 발생합니다.
gridzyRender렌더링 후 화재가 발생합니다.
여기에서 이벤트를 놓치셨다면 지원 요청을 보내주세요.

event.target Gridzy 컨테이너 요소를 제공합니다.
event.detail.instance Gridzy 인스턴스를 제공합니다.

아이템 요소에 발생한 이벤트:

설명
gridzyItemBeforeInit항목 초기화 전에 실행됩니다.
gridzyItemInit항목 초기화 후 실행됩니다.
gridzyItemLoading항목이 로딩되기 시작하면 발생합니다.
gridzyItemReady항목이 그리드 계산을 위해 준비되면 실행됩니다. 따라서 종횡비는 알려져 있지만 이미지가 아직 로드 중일 수 있습니다.
gridzyItemComplete아이템 이미지가 완전히 로드되면 실행됩니다.
여기에서 이벤트를 놓치셨다면 지원 요청을 보내주세요.

event.target 해당 항목 요소를 제공합니다.
event.detail.instance Gridzy 인스턴스를 제공합니다.

API – 글로벌

Gridzy 인스턴스와 독립적인 함수가 몇 가지 있습니다. 따라서 이전에 인스턴스를 가져올 필요가 없습니다.

기본 옵션 가져오기

// 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의 모든 자동화가 활성화되어 있는 한, 아래 방법은 필요 없습니다. 하지만 자동화를 끄면 Gridzy를 보다 전통적인 방식으로 사용할 수 있습니다.

// 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() 통해 설정할 수 없습니다.

기본값설명
autoInitOnDomReadytrue페이지 로딩 시 gridzy 클래스가 있는 요소를 감지하고 초기화합니다.

Gridzy.setDefaultOptions() 를 통해 설정 가능
autoInitOnDomMutation
돌연변이 관찰자		trueDOM에 나타나는 즉시 gridzy 클래스가 있는 새 요소를 감지하고 초기화합니다. (예: 페이지 전환 사용 시)

Gridzy.setDefaultOptions() 를 통해 설정 가능
autoSyncChildListMutation
돌연변이 관찰자		true자식 요소(이미지)가 추가되거나 제거되는지 감지하고 그리드를 자동으로 업데이트합니다.

data-grizy- , new Gridzy() , setOptions() , Gridzy.setDefaultOptions() 를 통해 설정 가능
useOptionAttributestruedata-gridzy- 속성을 일반적으로 사용할지 여부를 정의합니다. 이것이 false 이면 옵션은 독점 API를 통해서만 설정할 수 있습니다.

new Gridzy() , setOptions() , Gridzy.setDefaultOptions() 를 통해 설정 가능
autoSyncAttributesMutation
돌연변이 관찰자		truedata-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
ResizeObserver

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

인스턴스를 파괴합니다

간단히 말하면 Gridzy를 초기화하는 것과 반대입니다.

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