Gridzy.Gallery

webKreol Seselwa

Gridzy.Gallery
Bibliotek JavaScript

leksperyans portre pli enkrwayab ki mon'n trouve. finalman en dimoun i konpran ki mannyer pou fer sa byen!

Milo Persic – en itilizater bibliotek
aprann plis
ganny li la konmela

apersi rapid

1 minit leson video

zwe leson video

zis 1 minit

aprann sa dan zis en minit:

litilizasyon debaz

Konfigirasyon

bann filter

Laparans

selebre sa zour
anbras ou bann pros
vin pir avek ou lekor
Pa bliye bann plezir
santi lanatir

stil kapsyon

bann stil kapsyon ki'n ganny definir davans pou bann solisyon fasil e vit

pas lo bann zimaz pou vwar stil kapsyon ki'n ganny konfigere. zwe avek bann bouton ek bann seleksyon kouler pou konfigir stil ki'n ganny montre.

Dokimantasyon – Kapsyon ek Skin

bann tag ek filter

pou montre ou bann zimaz dan en fason pli striktire

sistenm filter ki'n ganny konstrir i ekstrememan fleksib. Lefe ki bann selekter CSS i ganny servi pou filtre i aktyelman permet preski nenport kalite filter.

Dokimantasyon – Filter

tre konpatib

Itilizab avek bokou bwat lalimyer

konbin sa galeri avek nenport ki bwat lalimyer. probabilite ki i konpatib i preski 100%. Klik lo bann zimaz pou vwar bwat lalimyer PhotoSwipe koman en legzanp.

I annan bann lartik blog avek bann morso kod pare:

Ekstansyon – PhotoSwipe
Ekstansyon – Magnific Popup

tre fleksib

selebre sa zour
anbras ou bann pros
vin pir avek ou lekor
Pa bliye bann plezir
santi lanatir

kree bann stil personnalize

si ou familye avek CSS, ou kapab stil bann itenm dan galeri dan lafason ki ou anvi.

CSS legzanp montre:

/* 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;
}
Dokimantasyon – Style Gridzy

servi nenport ki HTML

ou kapab servi preski nenport HTML. I annan zis tre pe restriksyon. bann legzanp ki ganny montre isi i prodwi menm rezilta vizyel.

Dokimantasyon – Semantik HTML

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

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

plis karakteristik itil

pe load pares

load ou bann zimaz ki ou'n vwar pli vit

sa i load zis sa bann zimaz ki pros avek landrwa vizib. Alor plis bandwidth pou bann zimaz vizib.

Dokimantasyon – Lazy Loading

API

les ou fer bokou plis

sa i permet ou azout e retir bann zimaz dan en fason progranmen, sanz bann opsyon oubyen reazir a bann levennman.

Dokimantasyon – API

bann ekstansyon

donn ou bann solisyon pou bann senaryo endividyel

I en koleksyon lartik blog ki grandi avek letan e i konteni bann morso kod itil pou fasilman prolonz Gridzy.Gallery .

bann ekstansyon

Itilizater lo bibliotek

monn fek entegre Gridzy dan mon sit e i meyer keksoz ki zanmen in annan! VIELEN DANK pou tou sa travay ki oun mete dan sa. i leksperyans portre pli enkrwayab ki mon'n trouve. finalman en dimoun i konpran ki mannyer pou fer sa byen!
montre langaz orizinal (angle)
5 lo 5 zetwal
North Carolina – Lanmerik
ekrir koman en revi CodeCanyon
grid enkrwayab.. wow. tre optimize pou vites.. pou definitivman vey plis travay 'lar' Helmut.
montre langaz orizinal (angle)
5 lo 5 zetwal
Singapur
ekrir koman en revi CodeCanyon
Sa i en tre byen konsevwar justified grid gallery, meyer ki mon'n trouve ziska prezan. i paret byen san ki i anpes li, i reponn byen avek groser lekran, i annan bokou opsyon itil san bagaz initil e i fleksib dan litilizasyon. Deplis, loter i reponn, touzour itil, profesyonnel, amikal e i annan javascript anba.
montre langaz orizinal (angle)
5 lo 5 zetwal
Lonn – Rwayonm Ini
ekrir koman en revi CodeCanyon
sa plugin i enkrwayab – mon ti krwar mon ti pou bezwen pas detrwa erdtan pe personnaliz me i ti en briz. monn adapte li pou travay avek bann domenn personnalize avanse ki donn mwan kontrol konplet lo ki mannyer mon bann galeri WordPress i ganny kree atraver admin. Mersi!
montre langaz orizinal (angle)
5 lo 5 zetwal
Leta Zini
ekrir koman en revi CodeCanyon

annou konmans biznes!

Klik lo bouton pou tyek bann plan!

tyek bann plan!