Gridzy.Gallery

webIgbo

Gridzy.Gallery
Ọbá akwụkwọ JavaScript

Ahụmahụ foto kacha ịtụnanya m chọtara. N'ikpeazụ, mmadụ ghọtara ka esi eme nke a OKWU!

Milo Persic – onye ọrụ ọbá akwụkwọ
Mụtakwuo
Nweta ya Ugbu a

Nghọta ngwa ngwa

1 nkeji nkuzi vidiyo

egwu video nkuzi

naanị otu nkeji

Mụta nke a n'otu nkeji:

Ojiji nke isi

Nhazi

Ihe nzacha

Ọdịdị

Mee ememe ụbọchị ahụ
Sutu ndị ị hụrụ n'anya ọnụ
Were onwe gi di ocha
Echefula ihe ọchị
Na-eche ọdịdị

Ụdị isiokwu

Ụdị nkọwa okwu eburu ụzọ kọwaa maka azịza ngwa ngwa dị mfe

Hụgharịa onyonyo ka ịhụ ụdị isiokwu aha ahaziri. Jiri bọtịnụ na ndị na-ahọrọ agba gwuo egwu iji hazie ụdị arụnyere egosipụtara.

Akwụkwọ - Okwu & Skins

Mkpado & nzacha

Ka igosi onyonyo gị n'ụzọ ahaziri ahazi

Sistemụ nzacha arụnyere na-agbanwe nke ukwuu. Eziokwu ahụ bụ na a na-eji ndị na-ahọpụta CSS maka nzacha na-enyere aka n'ezie ụdị nzacha ọ bụla.

Akwụkwọ – Nzacha

Dakọtara nke ukwuu

Enwere ike iji ọtụtụ igbe ọkụ

Gwakọta gallery na igbe ọkụ ọ bụla. Ihe gbasara nke puru omume na ọ dakọtara bụ ihe fọrọ nke nta ka ọ bụrụ 100%. Pịa onyonyo ka ịhụ igbe ọkụ PhotoSwipe dịka ọmụmaatụ.

Enwere akụkọ blọgụ nwere snippet koodu emebere:

Mgbakwunye – PhotoSwipe
Mgbatị - Mmapụta mara mma

Na-agbanwe agbanwe nke ukwuu

Mee ememe ụbọchị ahụ
Sutu ndị ị hụrụ n'anya ọnụ
Were onwe gi di ocha
Echefula ihe ọchị
Na-eche ọdịdị

Mepụta Ụdị Omenala

Ọ bụrụ na ị maara CSS nke ọma, ị nwere ike ịkepụta ihe gallery dịka ịchọrọ.

CSS nke ihe atụ egosiri:

/* 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;
}
Akwụkwọ – Style Gridzy

Jiri HTML ọ bụla

Ị nwere ike iji HTML ọ bụla. Enwere naanị mgbochi ole na ole. Ọmụmaatụ egosiri ebe a na-arụpụta otu nsonaazụ anya.

Akwụkwọ – HTML Semantic

Ọmụmaatụ 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>

Ọmụmaatụ 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>

Atụmatụ bara uru karịa

Nbudata dị umengwụ

Na-eburu onyogho gị anya ngwa ngwa

Nke a na-ebu naanị foto ndị dị nso na mpaghara a na-ahụ anya. Ya mere, ọtụtụ bandwit maka onyonyo a na-ahụ anya.

Akwụkwọ - Njikere ume ume

API

Na-enye gị ohere ime ọtụtụ ihe

Nke a na-enye gị ohere ịgbakwunye ma wepụ ihe onyonyo na mmemme, gbanwee nhọrọ ma ọ bụ meghachi omume na mmemme.

Akwụkwọ – API

Mgbatị

Na-enye gị ihe ngwọta maka ndapụta n'otu n'otu

Ọ bụ nchịkọta akụkọ blọgụ na-eto ka oge na-aga ma nwee snippets koodu na-enyere aka ịgbatị ngwa ngwa Gridzy.Gallery .

Mgbatị

Onye ọrụ gbasara ọba akwụkwọ

M tinyegoro Gridzy na saịtị m ma ọ bụ ihe kacha mma! VIELEN DANK maka ọrụ niile ị tinyere na nke a. Ọ bụ ahụmịhe foto kacha ịtụnanya m chọtara. N'ikpeazụ, mmadụ ghọtara ka esi eme nke a OKWU!
Gosi asụsụ izizi (Bekee)
Kpakpando 5 n'ime 5
North Carolina – United States
Edere dị ka nyocha CodeCanyon
Grid na-enweghị atụ.. Chaị. Nke kachasị maka ọsọ ọsọ. Ọ ga-abụrịrị na-eche maka ọtụtụ ọrụ 'nkà' Helmut
Gosi asụsụ izizi (Bekee)
Kpakpando 5 n'ime 5
Singapore
Edere dị ka nyocha CodeCanyon
Nke a bụ ihe ahaziri nke ọma justified grid gallery, nke kacha mma m chọtara ugbu a. Ọ dị mma na-enweghị ịbanye n'ụzọ, na-anabata nke ọma na nha ihuenyo, nwere ọtụtụ nhọrọ bara uru na-enweghị ihe na-adịghị mkpa ma na-agbanwe agbanwe. Ọzọkwa, onye edemede ahụ na-anabata, na-enyere aka mgbe niile, ọkachamara, enyi na enyi ma nwee javascript ala.
Gosi asụsụ izizi (Bekee)
Kpakpando 5 n'ime 5
London - UK
Edere dị ka nyocha CodeCanyon
Ngwa mgbakwunye a dị ịtụnanya - echere m na m ga-etinye awa ole na ole ịhazi mana ọ bụ ikuku. Emegharịrị m ya ka ọ rụọ ọrụ na Ubi Omenala dị elu na-enye m njikwa zuru oke etu esi emepụta veranda WordPress m site na onye nchịkwa. Daalụ!
Gosi asụsụ izizi (Bekee)
Kpakpando 5 n'ime 5
United States
Edere dị ka nyocha CodeCanyon

Ka anyị gbadaa azụmahịa!

Pịa bọtịnụ ka ịlele atụmatụ!

Lelee atụmatụ!