Gridzy.Gallery

webAlur

Gridzy.Gallery
JavaScript Library

Lembe maber mi goyo cal ma anwango. I ajiki ngati moku ungiyu kite mi timo eni maber!

Milo Persic – jatic pa ot kwan
Ponj lembe mukende
Nwange kawoni

Ngec ma nyap

1 dakika mi ponji mi vidio

nen vidio mi ponji

dakika acel kende

Ponj lembe eni i dakika manok kende:

Tic ma yot

Yub

Filters

Lanyuth

Kwer ceng ne
Lim ju ma imaru
Bed maleng ikum giri
Kud iwil anyonga
Winj piny

Kite mi goyo wi lembe

Kite mi goyo lembe ma juyiko con pi dwokowang lembe ma yot man pio pio

Keth cingi ikum cal ni neno kit ma jukiewo kudu. Tuk ku bute man rangi ma juyero ni ketho kit ma juyubu kudu.

Lembe ma jugoro - Wi lembe man adila

Tags & Filters

Ni nyuthu cal peri iyore maber

Filter system ma jugiero i iye utiye yot mandha. Lembe mandha nya CSS selectors jutiyo kudu pi filtering uketho filter moko ci copo bedu.

Karatasi – Filters

Ber mandha

Jucopo tiyo kudu ku Lightboxes madwong

Med gallery ku lightbox moko ci. Lembe ma copo bedu nya eromo kudu utiye 100%. Di wi cal ni neno PhotoSwipe lightbox calu lanyuth.

Lembe moko nuti ma jugoro i blog ku code ma juyiko con:

Medu – PhotoSwipe
Medu – Magnific Popup

Yore ma yot

Kwer ceng ne
Lim ju ma imaru
Bed maleng ikum giri
Kud iwil anyonga
Winj piny

Cwec kit ma imito

Ka ingeyo CSS, icopo ketho piny ma i gallery i yo ma imito.

CSS pa lanyuth ma ju nyuthu:

/* 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;
}
Lembe ma jugoro – Style Gridzy

Ti ku HTML moko ci

Icopo tiyo ku HTML moko ci. Cik manok kende re ma juketho. Lanyuth ma ju nyuthu keni zo gi kelo adwogi marom.

Lembe ma jugoro – Semantic HTML

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

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

Piny mukende ma pire tek

Lazy Loading

Kethu cal peri ma ineno pio pio

Eni ketho cal kende ma ceng ku kama nen. Dong bandwidth madwong pi cal ma nen.

Karatasi – Lazy Loading

API

Weku itim lembe madwong

Eni miyo icopo medu man kwanyu cal ku program, loko lembe nyo timo lembe ikum lembe moko.

Karatasi – API

Medu

Miyu iri adwogi pa lembe acel acel

Etiye dul pa lembe ma jugoro i blog ma dongo ku kare man utiye ku lembe ma konyowa ni medo Gridzy.Gallery .

Medu

Jatic ikum ot kwan

Aketho Gridzy i kabedu para man etiye piny maber uloyu! VIELEN DANK pi tic peri zo ma itimo. Etiye cal maber uloyu ma anwango. I ajiki ngati moku ungiyu kite mi timo eni maber!
Nyuth dhok macon (English)
5 ikum 5 Lakala
North Carolina – United States
kyewo calu CodeCanyon review
Grid maber akeca.. wow. juyike maber pi ngwec.. Abibedo ka neno tic pa Helmut mi 'art'
Nyuth dhok macon (English)
5 ikum 5 Lakala
Singapur
kyewo calu CodeCanyon review
Eni ubedo justified ma juyubu maber akeca, maber loyo ma anwango nitundu kawoni. Nen maber manangu emondo ngo i yo, edwoko maber ni dit pa screen, etiye ku piny madwong ma konyo manangu epe ku piny ma pire tek ungo man etiye yot ni tiyo kudu. Bende, jagor ubedo ngati ma dwoko wang lembe, kony kare ku kare, ngati ma timo tic maber, ngati ma maru dhanu man etiye ku javascript piny.
Nyuth dhok macon (English)
5 ikum 5 Lakala
London – UK
kyewo calu CodeCanyon review
Plugin eni ber mandha - aparu niya acopo tiyo ku sawa manok mi yubu piny peri ento ubedu yot. Aloko kudu ni tic ku Advanced Custom Fields ma miyo ira twero ikum kite ma WordPress galleries para juyubu kudu nikadhu kud i admin. Afoyo!
Nyuth dhok macon (English)
5 ikum 5 Lakala
Amerika
kyewo calu CodeCanyon review

Wek wacak tic!

Di wi button ni neno yub!

Nen yub!