Gridzy.Gallery

web日本語

Gridzy.Gallery
JavaScript ライブラリ

これまでで一番素晴らしい写真撮影体験です。ついに誰かがこれを正しく行う方法を理解しました!

ミロ・ペルシック – 図書館の利用者
もっと詳しく知る
今すぐ入手

クイックインサイト

1分間のビデオチュートリアル

ビデオチュートリアルを再生

たった1分

たった 1 分でこれを学びましょう:

基本的な使い方

構成

フィルター

外観

この日を祝う
愛する人にキスを
自分自身に対して純粋であれ
楽しみを忘れないで
自然を感じる

キャプションスタイル

簡単なクイックソリューションのための定義済みのキャプションスタイル

画像にマウスを合わせると、設定されたキャプション スタイルが表示されます。ボタンとカラー ピッカーを操作して、表示されている組み込みスタイルを設定します。

ドキュメント – キャプションとスキン

タグとフィルター

画像をより構造的に表示するには

組み込みのフィルター システムは非常に柔軟です。CSS セレクターがフィルター処理に使用されるため、ほぼすべてのタイプのフィルターが可能になります。

ドキュメント – フィルター

高い互換性

多くのライトボックスで使用可能

ギャラリーを任意のライトボックスと組み合わせることができます。互換性がある可能性はほぼ 100% です。画像をクリックすると、例として PhotoSwipe ライトボックスが表示されます。

既成のコード スニペットを含むブログ記事があります。

拡張機能 – PhotoSwipe
拡張機能 – 素晴らしいポップアップ

高い柔軟性

この日を祝う
愛する人にキスを
自分自身に対して純粋であれ
楽しみを忘れないで
自然を感じる

カスタムスタイルを作成する

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;
}
ドキュメント – スタイル 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

拡張機能

個々のシナリオに応じたソリューションを提供します

これは、時間の経過とともに増えていくブログ記事のコレクションであり、 Gridzy.Gallery簡単に拡張するための便利なコード スニペットが含まれています。

拡張機能

ユーザー ライブラリについて

Gridzy を自分のサイトに統合したところですが、これまでで最高の出来です。このために尽力していただいたことに感謝いたします。これまでで最も素晴らしい写真体験です。ようやく、これを正しく行う方法を誰かが理解してくれました。
元の言語を表示（英語）
5つ星のうち5つ
ノースカロライナ州 – アメリカ合衆国
CodeCanyonのレビューとして書かれた
信じられないほどのグリッド。すごい。スピードに非常に最適化されています。ヘルムートの「芸術」作品を今後も注目していきたいと思います。
元の言語を表示（英語）
5つ星のうち5つ
シンガポール
CodeCanyonのレビューとして書かれた
これは非常によく設計されたjustifiedグリッド ギャラリーで、これまで見つけた中で最高のものです。邪魔にならず見栄えがよく、画面サイズによく対応し、不要な負担をかけずに便利なオプションが豊富にあり、柔軟に使用できます。さらに、作者は反応が良く、常に役に立ち、プロフェッショナルで、フレンドリーで、JavaScript を完璧に使いこなしています。
元の言語を表示（英語）
5つ星のうち5つ
ロンドン – イギリス
CodeCanyonのレビューとして書かれた
このプラグインは素晴らしいです。カスタマイズに数時間かかると思っていましたが、とても簡単でした。Advanced Custom Fields と連携するように調整して、管理者から WordPress ギャラリーの作成方法を完全に制御できるようにしました。ありがとうございます!
元の言語を表示（英語）
5つ星のうち5つ
アメリカ合衆国
CodeCanyonのレビューとして書かれた

さあ、本題に入りましょう！

ボタンをクリックしてプランを確認してください!

プランをチェックしてください!