Gridzy.Gallery

webLuo

Gridzy.Gallery
Od somo mar JavaSkript

Gima kelo mor ahinya e picha ma aseyudo. Gikone ng’ato winjo tiend kaka onego otim kamano MORIYO!

Milo Persic – jatiyo kod od somo
Ng’e mathoth
Yude sani

Ng'eyo mapiyo

Puonj mar vidio mar dakika 1

goyo puonj mar vidio

dakika 1 kende

Ipuonjori wachni e dakika achiel kende:

Tiyo gi yore madongo

Chenro

Filta

Chal mar gimoro

Luor odiechieng'no
Kiss jogo ma ihero
Bed maler gi in owuon
Okidwar wil gi mor
Winj piny

Sitael mag ndiko weche

Sitael mag weche ma oseket motelo mondo oyud duoko mayot mapiyo

Ket piche mondo ine sitael mar weche ma oseket. Tuk gi baton kod gik ma yiero rangi mondo ilos sitael ma inyiso ma ogere.

Oboke – Weche kod Dende

Tag kod Filter

Mondo onyis piche magi e yo mowinjore maber

Sistem mar filta ma ogere e iye nyalo lokore ahinya. Kaka gik ma CSS yiero itiyogo e ng’ado bura, adier miyo ng’ato nyalo ng’ado bura kuom kit ng’ado bura moro amora.

Dokumentation – Filta

Owinjore ahinya

Onyalo Tiyo kod Boksi Mang’eny mag Taya

Kod galeri gi boksi moro amora mar ler. Onyalo bedo ni en gima owinjore en chiegni 100%. Gwel piche mondo ine boksi mar ler mar PhotoSwipe kaka ranyisi.

Nitie oboke mag blog ma nigi weche matin mag kod ma oseloso:

Omedo – Swipe mar picha
Omedore – Popup Maduong’

Onyalo lokore ahinya

Luor odiechieng'no
Kiss jogo ma ihero
Bed maler gi in owuon
Okidwar wil gi mor
Winj piny

Los sitael ma idwaro

Ka ing’eyo maber CSS, inyalo loso gik ma ni e galeri e yo ma idwaro.

CSS mar ranyisi ma onyis:

/* 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;
}
Oboke - Sitael mar Gridzy

Ti kod HTML moro amora

Inyalo tiyo kod HTML moro amora. Nitie mana gik matin ahinya ma iketo. Ranyisi ma onyis kae duto kelo duoko machalre ma nenore.

Oboke – HTML ma nyiso weche

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

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

Gik mathoth ma konyo

Loajo ma ok ng'iyo

Load piche maneno mapiyo

Mano keto mana piche ma ni machiegni gi kama nenore. Omiyo, bandwidth mang’eny mar piche ma nenore.

Dokumentation – Keto gik moko e yo ma ok ng’iyo

API

Oyiene timo gik mathoth

Mano miyo inyalo medo kendo golo piche e yor program, loko gik ma inyalo yiero kata timo gik moko kaluwore gi gik matimore.

Oboke – API

Gik ma omedore

Ochiwo duoko mag gik matimore ka gimoro

En chokruok mar weche mag blog ma dongo bang’ kinde kendo ma nigi weche ma konyo e loso kod mayot mondo omed Gridzy.Gallery .

Gik ma omedore

Jatiyo kod Od Buge

Ne aketo Gridzy e sait mara kendo en GIMO BER MOGI MOKO! VIELEN DANK kuom tich duto ma ne iketo e wachni. En gima ng’ato nyalo ng’iyogo picha ma ng’ato nyalo ng’iyogo. Gikone ng’ato winjo tiend kaka onego otim kamano MORIYO!
Nyis dhok machon (Dho Ingresa)
5 kuom sulwe 5
Carolina ma Nyanduat - Amerka
Ondiki kaka paro mar KodKanyon
Grid ma ok nyal yie.. wow. .. Abiro bedo ga ka aneno gik mathoth ma Helmut timo mag ‘art’.
Nyis dhok machon (Dho Ingresa)
5 kuom sulwe 5
Singapur
Ondiki kaka paro mar KodKanyon
justified Mae en galeri mar grid ma olosi maber ahinya, ma en gima ber moloyo ma ne ayudo nyaka sani. Neno maber ma ok odonjo e yo, odwoko maber ka ng’ato ng’iyo gi ng’eny mar skrin, en gi yore mang’eny ma konyo ma ok oting’o gik ma ok owinjore kendo onyalo tiyo kode kaka dwarore. Kaachiel gi mago, jandikono dwoko wach, okonyo kinde duto, en jalony, ohero ji kendo nigi javascript piny.
Nyis dhok machon (Dho Ingresa)
5 kuom sulwe 5
London - Ingresa
Ondiki kaka paro mar KodKanyon
Plugin ni en gima ber ahinya – ne aparo ni abiro dwaro tiyo gi seche moko matin mondo atim gik moko kaka dwarore to ne en yamo mayot. Ne aloko mondo otim tich gi kuonde ma ng’ato nyalo ng’adoe bura ma miyo abedo gi teko chuth mar kaka galeri mag WordPress ma an-go olosi kokalo kuom jatend-alwora. Erokamano!
Nyis dhok machon (Dho Ingresa)
5 kuom sulwe 5
Amerka
Ondiki kaka paro mar KodKanyon

Wadhi e tich!

<2Zepa> Gwel baton mondo ine chenro ma itimo!

Neno chenro ma nitie!