Gridzy.Gallery

webMizo

Gridzy.Gallery
JavaScript Library ah hian a awm a

Thlalak experience mak ber ber ka hmuh tawh. A tawpah chuan mi pakhatin hei hi tih dan dik tak a hrethiam!

Milo Persic – library hmangtu pakhat
Hriat belh zel rawh
Tunah hian la rawh

Hriatthiamna rang tak

Minute 1 chhung video tutorial a ni

video play tutorial a ni

minute 1 chauh a ni

Minute khat chhungin hei hi zir rawh:

A hman dan bulpui

Configuration a awm bawk

Filter hrang hrang a awm

Landan

Ni chu lawm rawh
I hmangaih tak takte chu fawp rawh
Nangmah leh nangmah thianghlim takin awm rawh
Hlimna chu theihnghilh suh ang che
Nature chu hre rawh

Caption Style hrang hrang

Caption styles predefined te chu awlsam taka rang taka chinfel theihna tur a ni

Image te chu hover la, configured caption style chu i hmu ang. Button leh color picker te hmangin play la, built-in style tarlan chu configure rawh.

Documentation – Caption leh vun te

Tags leh Filter te a awm

I images te chu a structured zawka i display theih nan

Built-in filter system hi a flexible hle. CSS selector te hi filtering atana hman a nih avangin a takah chuan filter chi hrang hrang deuhthaw a awm thei.

Documentation – Filter hrang hrang

A inmil hle

Lightbox tam tak nen hman theih a ni

Gallery chu eng lightbox pawh nen inzawm khawm rawh. A inmil theihna chance chu 100% vel a ni. Thlalak te hi click la, entirnan PhotoSwipe lightbox chu i hmu ang.

Blog article-ah hian code snippet siam sa vek a awm a:

Extension – PhotoSwipe tih a ni
Extension – Popup ropui tak

Flexible sang tak a ni

Ni chu lawm rawh
I hmangaih tak takte chu fawp rawh
Nangmah leh nangmah thianghlim takin awm rawh
Hlimna chu theihnghilh suh ang che
Nature chu hre rawh

Custom Styles siam rawh

CSS i hriat chian chuan gallery items te chu i duh angin i style thei ang.

CSS of entirnan:

/* 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;
}
Documentation – Style Gridzy tih a ni

HTML eng pawh hmang rawh

HTML zawng zawng deuhthaw i hmang thei. Khapna hi a tlem hle mai. Heta entîrna kan hmuhte hian hmuh theih result inang an siam vek a ni.

Documentation – Thumal awmzia (Semantic HTML) a ni

Entirna 1: 1.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>

Entîrna 2-na:

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

Thil \angkai zawk

Lazy Loading a ni

I viewed images te chu a load chak zawk

Hei hian hmuh theihna hmun hnaih ber images chauh a load thin. Chuvangin hmuh theih thlalak atan bandwidth tam zawk.

Documentation – Lazy Loading tih a ni

API a ni

Thil tam tak tih theihna a siamsak bawk

Hei hian programmatic-in images add leh remove theihna a siam a, options thlak theihna emaw events react theihna a siam bawk.

Documentation – API tih a ni

Extension te pawh a awm

Mimal scenario hrang hrangte tana solution a pe che a ni

Blog article hrang hrang, hun kal zelah a lo thang lian a, awlsam taka tihzauh theihna tur code snippet \angkai tak tak a awm a ni Gridzy.Gallery .

Extension te pawh a awm

User Library chungchang

Gridzy hi ka site-ah ka integrate chauh a, BEST THING EVER a ni! VIELEN DANK hian he thila hna i thawh zawng zawng avangin. Photo experience ka hmuh tawh zingah chuan mak ber a ni. A tawpah chuan mi pakhatin hei hi tih dan dik tak a hrethiam!
Hnam hmasa (Mizo) entir rawh.
Star 5 zinga 5 a ni
North Carolina – United States atanga lo chhuak a ni
CodeCanyon review anga ziah a ni
Grid mak tak mai.. wow. highly optimized for speed.. Helmut-a kutchhuak 'art' tam zawk chu kan lo thlir reng dawn a ni.
Hnam hmasa (Mizo) entir rawh.
Star 5 zinga 5 a ni
Singapore-ah a awm a
CodeCanyon review anga ziah a ni
Hei hi justified grid gallery design tha tak a ni a, tun thlenga ka hmuh chhuah tha ber a ni. Kawng tidanglam lovin a lang tha a, screen size a chhang tha hle a, thil tul lo baggage tel lovin option tangkai tak tak a nei nual a, hmannaah pawh a flexible hle. Chubakah, a ziaktu hi a chhang let thei a, a tanpui thei reng a, professional tak a ni a, a friendly bawk a, javascript down pat a nei bawk.
Hnam hmasa (Mizo) entir rawh.
Star 5 zinga 5 a ni
London – UK-ah a awm a
CodeCanyon review anga ziah a ni
He plugin hi a mak khawp mai – darkar engemaw zat customize-na ka hman a ngai dawn niin ka hria a mahse a awlsam hle. Advanced Custom Fields nena thawk dun turin ka siam danglam a, chu chuan admin kaltlangin ka WordPress gallery siam dan tur control kimchang min pe a ni. Ka lawm e!
Hnam hmasa (Mizo) entir rawh.
Star 5 zinga 5 a ni
United States a ni
CodeCanyon review anga ziah a ni

Sumdawnna lamah i lut ang u!

Plans te chu i en theih nan button kha click la!

Plans te chu en rawh!