Gridzy.Gallery
Biblioteke ya JavaScript

Expérience ya foto ya kuluta kitoko yina mono me monaka. Nsuka-nsuka muntu mosi me bakisa mutindu ya kusala mambu yai MBOTE!
Milo Persic – muntu ya ke sadilaka biblioteke .

Longuka mambu mingi

Baka yo sesepi

Kuzaba mambu nswalu

Malongi ya video ya munuta mosi

bula malongi ya video

munuta mosi mpamba

Longuka mambu yai na munuta mosi mpamba:

Kusadila ya mfunu

Kuyidika

Bafiltre

Kumonana

Midele ya bisono

Midele ya bisono ya bo me yidika na ntwala sambu na bamvutu ya pete mpi ya nswalu

Tula diboko na zulu ya bifwanisu sambu na kumona mutindu ya bisono yina bo me yidika. Sakana ti babuto mpi bima yina ke ponaka mikubu sambu na kuyidika mutindu ya kutunga yina bo me monisa.

Mambu ya bo me sonika

Nsi ya bisono

Mikanda – Ba sous-titre & Ba mpusu ya nitu

Ba tag & ba filtre

Sambu na kumonisa bifwanisu na nge na mutindu mosi ya kuyidika mbote

E nlonga mia filtro miatungilwa muna kati miatoma sadilwanga. Mutindu bo ke sadilaka ba selector ya CSS sambu na kufiltrer, yo ke sadisaka kibeni pene-pene ya konso mutindu ya kufiltrer.

Mikanda – Bafiltre

Yo ke wakana mbote

Bo lenda sadila yo ti ba-lumière mingi

Sangisa galerie ti konso lumière. E vuvu kia sia vo kifwanana, tezo kia 100%. Fina na bifwanisu sambu na kumona kisika yina bo me sonika PhotoSwipe bonso mbandu.

Kele ti masolo ya blog yina kele ti bitini ya bakode ya kuyidika:

Kulanda – Kubalula Foto

Kulanda – Kubasika ya nene

Flexible mingi

Sala mitindu ya nge mosi

Kana nge me zaba mbote CSS, nge lenda tula bima ya galerie mutindu nge me zola.

CSS ya mbandu ya bo me monisa:

/* 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;
}

Mikanda – Mutindu ya Gridzy

Sadila konso HTML

Nge lenda sadila pene-pene ya konso HTML. Kuna ye nsiku miakete kikilu. Bambandu yina bo me monisa awa yonso zole ke basisaka mbutu mosi ya ke monanaka.

Mikanda – HTML ya semantique

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

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

Bima mingi ya mfunu

Kutula ya bumolo

Kutula bifwanisu na nge ya nge me tala nswalu

Ediadi difilanga kaka e fwaniswa ina lukufi ye fulu kimonekanga. Yo yina, bandwidth mingi sambu na bifwanisu yina ke monana.

Mikanda – Kutula ya bumolo

API

Ke pesa nge nzila ya kusala mambu mingi

Yo ke sadisaka nge na kuyika mpi kukatula bifwanisu na nzila ya programe, kusoba mambu yina nge lenda pona to kusala mambu na mambu yina ke salama.

Mikanda – API

Bima ya nkaka

Kupesa nge bamvutu sambu na mambu mosi-mosi

Yau kele kimvuka ya masolo ya blog yina ke yela na nima ya ntangu mpi kele ti bitini ya kode ya ke sadisa sambu na kuyedisa kukonda mpasi Gridzy.Gallery .

Bima ya nkaka

Muntu ya ke sadilaka Biblioteke

Mono me katuka kukotisa Gridzy na site na mono mpi yo kele KIMA YA KULUTA MBOTE! VIELEN DANK sambu na kisalu yonso ya beno me tula na mambu yai. Yo kele eksperiansi ya foto ya kuluta kitoko yina mono me monaka. Nsuka-nsuka muntu mosi me bakisa mutindu ya kusala mambu yai MBOTE!

Monisa ndinga ya kisina (Kingelesi)

5 na zulu ya 5 ya bambwetete

Caroline ya Nordi – Amerika

bo sonikaka yo bonso mvutu ya CodeCanyon

Grille ya kuyituka.. wow. très optimisé pour la vitesse.. Ta vanda kibeni na kutala sambu na bisalu mingi ya ‘art’ ya Helmut.

Monisa ndinga ya kisina (Kingelesi)

5 na zulu ya 5 ya bambwetete

Singapur

bo sonikaka yo bonso mvutu ya CodeCanyon

Ediadi i justified diambote kikilu, diambote yasolola yamu wau. Yo ke monanaka mbote kukonda kukota na nzila, yo ke pesaka mvutu ya mbote na nene ya ecran, yo kele ti mambu mingi ya mfunu ya kupona kukonda bima ya mfunu mpi yo ke vandaka pete na kusadila. Dyaka, nsoniki kepesaka mvutu, kesadisaka ntangu yonso, muntu ya kisalu, kinduku mpi yandi kele ti javascript na nsi ya pat.

Monisa ndinga ya kisina (Kingelesi)

5 na zulu ya 5 ya bambwetete

Londres – Royaume-Uni

bo sonikaka yo bonso mvutu ya CodeCanyon

Plugin yayi kele ya kuyituka – mu banzaka nde mu fwete lutisa mwa bangunga na kuyidika kansi yo vandaka mupepe. Mu me yidika yau sambu na kusala ti Bisika ya Kuyidika ya Kuyela yina ke pesa munu kiyeka ya mvimba ya mutindu ba galerie na munu ya WordPress ke salama na nzila ya admin. Matondo!

Monisa ndinga ya kisina (Kingelesi)

5 na zulu ya 5 ya bambwetete

Etats-Unis

bo sonikaka yo bonso mvutu ya CodeCanyon

Bika beto yantika kisalu!

Fina na buto sambu na kumona bapula!

Tala Bapula!

Gridzy.Gallery
Biblioteke ya JavaScript

Kuzaba mambu nswalu

Kumonana

Midele ya bisono

Ba tag & ba filtre

Yo ke wakana mbote

Bo lenda sadila yo ti ba-lumière mingi

Flexible mingi

Sala mitindu ya nge mosi

Sadila konso HTML

Bima mingi ya mfunu

Kutula ya bumolo

API

Bima ya nkaka

Muntu ya ke sadilaka Biblioteke

Bika beto yantika kisalu!

Kima ya WordPress

Biblioteke ya JavaScript

Kisalu

Gridzy.Gallery Biblioteke ya JavaScript

Kuzaba mambu nswalu

Kumonana

Midele ya bisono

Ba tag & ba filtre

Yo ke wakana mbote

Bo lenda sadila yo ti ba-lumière mingi

Flexible mingi

Sala mitindu ya nge mosi

Sadila konso HTML

Bima mingi ya mfunu

Kutula ya bumolo

API

Bima ya nkaka

Muntu ya ke sadilaka Biblioteke

Bika beto yantika kisalu!

Gridzy.Gallery
Biblioteke ya JavaScript