Gridzy.Gallery

web한국어는

Gridzy.Gallery
자바스크립트 라이브러리

제가 발견한 가장 놀라운 사진 경험입니다. 마침내 누군가가 이걸 올바르게 하는 방법을 이해했습니다!

Milo Persic – 도서관 사용자
더 알아보기
지금 구매하세요

빠른 통찰력

1분 영상 튜토리얼

비디오 튜토리얼 재생

단 1분만

1분 안에 이것을 알아보세요:

기본 사용법

구성

필터

모습

이 날을 축하해요
사랑하는 사람에게 키스하세요
자신에게 순수해지세요
재미를 잊지 마세요
자연을 느껴보세요

캡션 스타일

쉽고 빠른 솔루션을 위한 미리 정의된 캡션 스타일

이미지에 마우스를 올려놓으면 구성된 캡션 스타일이 표시됩니다. 버튼과 색상 선택기를 사용하여 표시된 기본 제공 스타일을 구성합니다.

문서 – 캡션 및 스킨

태그 및 필터

이미지를 보다 체계적인 방식으로 표시하려면

내장된 필터 시스템은 매우 유연합니다. CSS 선택자가 필터링에 사용된다는 사실은 실제로 거의 모든 유형의 필터를 가능하게 합니다.

문서 - 필터

높은 호환성

다양한 라이트박스와 함께 사용 가능

갤러리를 모든 라이트박스와 결합하세요. 호환될 확률은 거의 100%입니다. 이미지를 클릭하여 PhotoSwipe 라이트박스를 예로 들어보세요.

기성 코드 조각이 포함된 블로그 기사가 있습니다.

확장 프로그램 – PhotoSwipe
확장 – Magnific Popup

매우 유연함

이 날을 축하해요
사랑하는 사람에게 키스하세요
자신에게 순수해지세요
재미를 잊지 마세요
자연을 느껴보세요

사용자 정의 스타일 만들기

CSS에 익숙하다면 원하는 대로 갤러리 항목의 스타일을 지정할 수 있습니다.

표시된 예의 CSS:

/* CSS class: "gridzySkin-custom-sepia" */

@property --gridzySkin-custom-sepia--filter-sepia {
	initial-value: 1;
	inherits: true;
	syntax: "<number>";
}
@property --gridzySkin-custom-sepia--filter-contrast {
	initial-value: 1;
	inherits: true;
	syntax: "<number>";
}

.gridzySkin-custom-sepia > .gridzyItem {
	position: relative;
	overflow: unset;
	margin: -10px;
	border: 10px solid #fff;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
	border-radius: 10px;
}

.gridzySkin-custom-sepia > .gridzyItem *:not(.gridzyCaption) {
	display: inline;
}

.gridzySkin-custom-sepia > .gridzyItem .gridzyCaption * {
	display: initial;
}

.gridzySkin-custom-sepia > .gridzyItem:nth-child(4n) {
	transform: rotate(-1deg);
}

.gridzySkin-custom-sepia > .gridzyItem:nth-child(4n+1) {
	transform: rotate(-.5deg);
}

.gridzySkin-custom-sepia > .gridzyItem:nth-child(4n+2) {
	transform: rotate(1deg);
}

.gridzySkin-custom-sepia > .gridzyItem:nth-child(4n+3) {
	transform: rotate(.5deg);
}

.gridzySkin-custom-sepia .gridzyImage {
	position: relative;
	vertical-align: middle;
	border-radius: 3px;

	--gridzySkin-custom-sepia--filter-sepia: 1;
	--gridzySkin-custom-sepia--filter-contrast: .7;
	filter: sepia(var(--gridzySkin-custom-sepia--filter-sepia)) contrast(var(--gridzySkin-custom-sepia--filter-contrast));
	transition: --gridzySkin-custom-sepia--filter-sepia .6s, --gridzySkin-custom-sepia--filter-contrast .6s;
}

.gridzySkin-custom-sepia > .gridzyItem:hover .gridzyImage {
	--gridzySkin-custom-sepia--filter-sepia: 0;
	--gridzySkin-custom-sepia--filter-contrast: 1;
}

.gridzySkin-custom-sepia .gridzyCaption {
	margin: 0;
	padding: .5em;
	position: absolute;
	z-index: 1;
	bottom: -.5em;
	top: auto;
	width: auto;
	max-width: calc(100% - 2em);
	height: fit-content;
	max-height: 100%;
	overflow: auto;
	box-sizing: border-box;
	background: rgba(238, 238, 238, .8);
	color: #000;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, .3);
	opacity: 0;
	transition: opacity .3s;
}

.gridzySkin-custom-sepia > .gridzyItem:nth-child(3n) .gridzyCaption {
	transform: translateX(1000px) translateX(-50%) rotate(3deg);
}

.gridzySkin-custom-sepia > .gridzyItem:nth-child(3n+1) .gridzyCaption {
	transform: translateX(1000px) translateX(-50%) rotate(-3deg);
}

.gridzySkin-custom-sepia > .gridzyItem:nth-child(3n+2) .gridzyCaption {
	transform: translateX(1000px) translateX(-50%) rotate(-1deg);
}

.gridzySkin-custom-sepia > .gridzyItem:nth-child(5n) .gridzyCaption {
	left: calc(50% - 1000px);
}

.gridzySkin-custom-sepia > .gridzyItem:nth-child(5n+1) .gridzyCaption {
	left: calc(54% - 1000px);
}

.gridzySkin-custom-sepia > .gridzyItem:nth-child(5n+2) .gridzyCaption {
	left: calc(46% - 1000px);
}

.gridzySkin-custom-sepia > .gridzyItem:nth-child(5n+3) .gridzyCaption {
	left: calc(52% - 1000px);
}

.gridzySkin-custom-sepia > .gridzyItem:nth-child(5n+4) .gridzyCaption {
	left: calc(48% - 1000px);
}

.gridzySkin-custom-sepia > .gridzyItem:hover .gridzyCaption {
	opacity: 1;
}
문서 – Style Gridzy

HTML을 사용하세요

거의 모든 HTML을 사용할 수 있습니다. 제한 사항은 매우 적습니다. 여기에 표시된 예는 모두 동일한 시각적 결과를 생성합니다.

문서화 – 의미론적 HTML

예시 1:

<ul class="gridzy gridzySkinClassic">
	<li>
		<a href="https://www.example.com/">
			<img class="gridzyImage" src="https://www.example.com/image1.jpg" />
			<span class="gridzyCaption">example caption 1</span>
		</a>
	</li>
	<li>
		<a href="https://www.example.com/">
			<img class="gridzyImage" src="https://www.example.com/image2.jpg" />
			<span class="gridzyCaption">example caption 2</span>
		</a>
	</li>
	...
</ul>

예시 2:

<section class="gridzy gridzySkinClassic">
	<figure>
		<img class="gridzyImage" src="https://www.example.com/image1.jpg" />
		<figcaption class="gridzyCaption">example caption 1</figcaption>
	</figure>
	<figure>
		<img class="gridzyImage" src="https://www.example.com/image2.jpg" />
		<figcaption class="gridzyCaption">example caption 2</figcaption>
	</figure>
	...
</section>

더 유용한 기능

레이지 로딩

본 이미지를 더 빠르게 로드합니다

이렇게 하면 보이는 영역에 가까운 이미지만 로드합니다. 따라서 보이는 이미지에 대한 대역폭이 더 커집니다.

문서 – 레이지 로딩

API

훨씬 더 많은 작업을 수행할 수 있습니다

이를 통해 프로그래밍 방식으로 이미지를 추가하거나 제거하고, 옵션을 변경하거나 이벤트에 반응할 수 있습니다.

문서 – API

확장

개별 시나리오에 대한 솔루션을 제공합니다

시간이 지남에 따라 확장되는 블로그 게시물 모음으로, Gridzy.Gallery 쉽게 확장하는 데 도움이 되는 코드 조각이 포함되어 있습니다.

확장

사용자 도서관 정보

방금 Gridzy를 내 사이트에 통합했는데, 지금까지 최고예요! VIELEN DANK, 이걸 위해 수고하셨습니다. 제가 찾아본 사진 경험 중 가장 놀랍습니다. 마침내 이걸 제대로 하는 방법을 아는 사람이 생겼네요!
원래 언어 표시(영어)
5/5점
노스캐롤라이나 - 미국
CodeCanyon 리뷰로 작성됨
놀라운 그리드.. 와우. 속도에 최적화되어 있네요.. Helmut의 '예술' 작품을 더 많이 볼 수 있기를 기대하겠습니다.
원래 언어 표시(영어)
5/5점
싱가포르
CodeCanyon 리뷰로 작성됨
이것은 매우 잘 디자인된 justified 그리드 갤러리로, 지금까지 제가 찾은 것 중 최고입니다. 방해가 되지 않으면서도 보기 좋고, 화면 크기에 잘 반응하며, 불필요한 짐 없이 유용한 옵션이 많고, 사용에 유연합니다. 게다가 저자는 반응이 빠르고, 항상 도움이 되고, 전문적이며, 친절하고, 자바스크립트를 완벽하게 구사합니다.
원래 언어 표시(영어)
5/5점
런던 – 영국
CodeCanyon 리뷰로 작성됨
이 플러그인은 정말 대단합니다. 몇 시간 동안 사용자 정의해야 할 줄 알았는데 아주 간단했습니다. 고급 사용자 정의 필드와 함께 작동하도록 조정하여 관리자를 통해 WordPress 갤러리를 만드는 방법을 완벽하게 제어할 수 있었습니다. 감사합니다!
원래 언어 표시(영어)
5/5점
미국
CodeCanyon 리뷰로 작성됨

이제 본론으로 들어가죠!

버튼을 클릭해서 계획을 확인하세요!

계획을 확인하세요!