Gridzy.Gallery

webAcholi

Gridzy.Gallery
JavaScript Library

Gin ma mako cal maber loyo ma anongo. I agiki ngat mo oniang kit me timo man maber!

Milo Persic – ngat ma tiyo ki ot ma ki gwoko iye buk
Nwong ngec mukene
Nong ne kombedi

Ngec ma oyot

1 dakika me pwony me vidio

tuku vidio me pwony

dakika 1 keken

Pwony man i dakika manok keken:

Tic ma yot

Kit me yubu

Jami ma ki kwanyo

Kit ma nen kwede

Kwero nino ni
Dot dog jo ma imaro
Bed maleng i komi keni
Pe iwek jami me yomcwiny ni owil
Winy kit ma piny tye kwede

kit me coc

Kit me coc ma ki ngeyo con pi lagam ma yot

Ket cingi i kom cal ni me neno kit ma ki yubu kwede coc ma ki coyo. Tuku ki bute ki kala ma ki yero me yubu kit ma ki nyutu kwede.

Coc ma ki coyo - coc ma ki coyo piny ki del kom

Tags & Filters

Me nyutu cal ni i yoo maber

Gin ma ki yubu me juku pii ni yot ata. Lok ada ni CSS ma ki yero ni ki tiyo kwede me yero jami ma pat pat weko jami ma yero jami weny.

Coc ma ki coyo - Jami ma ki kwanyo

Ber tutwal

Kitwero tic kwede ki Lightboxes mapol

Rib ot ma ki nyutu iye cal ki gin mo kiken ma ki lwongo ni lightbox. Kit ma twero bedo ni rwate kwede tye cok ki 100%. Dii cal ni me neno PhotoSwipe lightbox ma calo labol.

Tye pwony me blog ma tye ki coc ma ki yubu con:

Medo – PhotoSwipe
Medo – Magnific Popup

twero loko loko

Kwero nino ni
Dot dog jo ma imaro
Bed maleng i komi keni
Pe iwek jami me yomcwiny ni owil
Winy kit ma piny tye kwede

Yub kit ma imito

Ka ingeyo CSS maber, itwero yubu jami ma ki keto i gallery kit ma imito kwede.

CSS me labol ma ki nyutu:

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

Tii ki HTML mo keken

Itwero tic ki HTML mo keken. Tye jami manok keken ma ki gengo. Labol ma ki nyutu kany weng gi kelo adwogi ma nen acel.

Coc – Semantic HTML

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

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

Jami mukene ma konyo

Keto jami labongo tic

medo cal ma ineno oyoto

Man keto cal ma tye cok ki kama nen keken. Pi meno bandwidth madwong pi cal ma nen.

Coc ma ki coyo - keto ne labongo tic

API

miini twero me timo jami mapol

Man miini twero me medo ki kwanyo cal ma ki yubu, loko gin ma imito onyo timo gin mo i kom jami ma tye ka time.

Coc – API

Medo jami

miini yoo me cobo peko acel acel

En tye yub me coc ma dongo i kare ki kare ki tye ki coc ma konyo me medo Gridzy.Gallery .

Medo jami

Latic ma mako ot ma ki gwoko iye buk

Aketo Gridzy i kabedo na ki en aye gin maber loyo! VIELEN DANK pi tic weng ma i keto i lok man. En aye cal maber loyo ma anongo. I agiki ngat mo oniang kit me timo man maber!
Nyut leb macon (Leb Munu)
5 ki ikom 5 lakalatwe
North Carolina – Lobo Amerika
ki coyo ma calo neno pa CodeCanyon
Grid maber atika.. wow. ki yubu maber pi ngwec.. Wa bi bedo ka neno tic pa Helmut me 'cwec' mukene
Nyut leb macon (Leb Munu)
5 ki ikom 5 lakalatwe
Singapur
ki coyo ma calo neno pa CodeCanyon
Man obedo gin ma ki yubu maber atika justified grid gallery, maber loyo ma anongo nio wa kombedi. Nen maber labongo balo yoo, gamo maber i kom dit pa gin ma ki neno, tye ki jami mapol ma konyo labongo keto jami ma pe mitte ki tiyo kwede. Medo ikom meno, laco buk ni gamo lok, konyo kare weny, ngeyo tic maber, larem ki tye ki coc ma ki coyo piny.
Nyut leb macon (Leb Munu)
5 ki ikom 5 lakalatwe
London – UK
ki coyo ma calo neno pa CodeCanyon
Gin ma ki keto ni ber ata - atamo ni omyero ater cawa manok me yubu ne ento onwongo yot. Aloko ne me tic ki Advanced Custom Fields ma miina twero i kom kit ma WordPress galleries ni ki yubu kwede ki bot ladit. Apwoyo!
Nyut leb macon (Leb Munu)
5 ki ikom 5 lakalatwe
Lobo Amerika
ki coyo ma calo neno pa CodeCanyon

Wek wacak tic!

Dii bute ni me neno yub ni!

Nen yub ni!