Gridzy.Gallery

webXitsonga

Gridzy.Gallery
Layiburari ya JavaScript

Ntokoto wo hlamarisa swinene wa swifaniso lowu ndzi wu kumeke. Eku heteleleni munhu u twisisa ndlela yo endla leswi HI SWONA!

Milo Persic – mutirhisi wa layiburari
Dyondza Swin’wana
Yi Kuma Sweswi

Vutivi bya Xihatla

Dyondzo ya vhidiyo ya minete yin’we

tlanga dyondzo ya vhidiyo

minete yin’we ntsena

Dyondza leswi hi minete yin’we ntsena:

Matirhiselo ya xisekelo

Ku lulamisiwa ka swilo

Swisefo

Xivumbeko

Tlangela siku
Kiss varhandziwa va wena
Vana la tengeke eka wena n’wini
U nga rivali ku tsakisa
Titwa ntumbuluko

Switayili swa Switlhokovetselo

Switayili swa swifaniso leswi hlamuseriweke ka ha ri emahlweni swa swintshuxo swo olova swa xihatla

Hover swifaniso ku vona xitayili xa caption lexi hleriweke. Tlanga hi swikomba-nkarhi na swihlawuhlawu swa mihlovo ku lulamisa xitayili lexi kombisiweke lexi akiweke endzeni.

Matsalwa – Switlhokovetselo & Swikhumba

Tithegi & Swisefo

Ku kombisa swifaniso swa wena hi ndlela leyi hlelekeke swinene

Endlelo ra sefo leri akiweke endzeni ri cinca-cinca swinene. Mhaka ya leswaku swihlawulekisi swa CSS swi tirhisiwa ku sefa entiyisweni yi endla leswaku ku va na kwalomu ka muxaka wihi na wihi wa xisefo.

Matsalwa – Swisefo

Swi Fambisana Swinene

Ku Tirhisa Na Mabokisi Yo Tala Yo Vonakala

Hlanganisa gallery na lightbox yin’wana na yin’wana. Ku koteka ka leswaku yi fambisana swi lava ku va 100%. Click swifaniso ku vona lightbox ya PhotoSwipe tani hi xikombiso.

Kuna swihloko swa blog leswi nga na swiphemu swa khodi leswi lunghekeleke:

Xiengetelo – PhotoSwipe
Ku engeteriwa – Popup yo hlamarisa

Ku Cinca-cinca Swinene

Tlangela siku
Kiss varhandziwa va wena
Vana la tengeke eka wena n’wini
U nga rivali ku tsakisa
Titwa ntumbuluko

Endla Switayili swa Xihlawuhlawu

Loko u tolovelane na CSS, u nga ha style swilo swa gallery hi ndlela leyi u lavaka ha yona.

CSS ya xikombiso lexi kombisiweke:

/* 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;
}
Matsalwa – Xitayili xa Gridzy

Tirhisa HTML yihi na yihi

U nga tirhisa kwalomu ka HTML yin’wana ni yin’wana. Ku ni swipimelo swi nga ri swingani ntsena. Swikombiso leswi kombisiweke laha havumbirhi bya swona swi humesa mbuyelo lowu fanaka wa xivono.

Matsalwa – HTML ya Semantiki

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

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

Swihlawulekisi Swin’wana Leswi Pfunaka

Ku Layicha ka Vulolo

Ku layicha swifaniso swa wena leswi langutisiweke hi ku hatlisa

Leswi swi layicha ntsena swifaniso leswi nga ekusuhi ni ndhawu leyi vonakaka. Kutani bandwidth yo tala ya swifaniso leswi vonakaka.

Matsalwa – Ku Layicha ka Vulolo

API

Swi ku pfumelela ku endla swin’wana swo tala

Leswi swi ku pfumelela ku engetela na ku susa swifaniso hi phurogireme, ku cinca swihlawulekisi kumbe ku angula eka swiendlakalo.

Matsalwa – API

Swiengetelo

Yi ku nyika swintshuxo swa swiyimo swa munhu hi xiyexe

I nhlengeleto wa swihloko swa blog leswi kulaka hi ku famba ka nkarhi naswona swi na swiphemu swa khodi leswi pfunaka ku andlala hi ku olova Gridzy.Gallery .

Swiengetelo

Mutirhisi Malunghana na Layiburari

Ndzi lo hlanganisa Gridzy ntsena eka sayiti ya mina naswona i MHAKA YO ANTSWA HINKWAYO! VIELEN DANK eka ntirho hinkwawo lowu u wu vekeke eka leswi. I ntokoto wo hlamarisa swinene wa swifaniso lowu ndzi wu kumeke. Eku heteleleni munhu u twisisa ndlela yo endla leswi HI SWONA!
Show original language (Xitsonga) .
5 eka 5 Tinyeleti
Carolina N’walungu – United States
yi tsariwile tanihi nxopaxopo wa CodeCanyon
Gridi yo hlamarisa.. wow. highly optimized for speed.. Hakunene yi ta va yi langutele ntirho wo tala wa Helmut wa 'vutshila'.
Show original language (Xitsonga) .
5 eka 5 Tinyeleti
Singapore
yi tsariwile tanihi nxopaxopo wa CodeCanyon
Leyi i galari ya gridi ya justified leyi endliweke kahle swinene, leyinene ngopfu leyi ndzi yi kumeke ku fikela sweswi. Yi languteka kahle handle ko nghena endleleni, yi hlamula kahle eka sayizi ya xikirini, yi na swihlawulekisi swo tala leswi pfunaka handle ka mindzhwalo leyi nga lavekiki naswona yi cinca-cinca loko yi tirhisiwa. Ku tlula kwalaho, mutsari wa hlamula, wa pfuna minkarhi hinkwayo, wa xiphurofexinali, u na xinghana naswona u na javascript down pat.
Show original language (Xitsonga) .
5 eka 5 Tinyeleti
London – UK
yi tsariwile tanihi nxopaxopo wa CodeCanyon
Plugin leyi ya hlamarisa – ndzi ehlekete leswaku ndzi ta lava ku heta tiawara ti nga ri tingani ndzi ri karhi ndzi customize kambe a ku ri moya wo olova. Ndzi yi cincile leswaku yi tirha na Advanced Custom Fields yi ndzi nyika vulawuri lebyi heleleke bya ndlela leyi ti galleries ta mina ta WordPress ti endliwaka ha yona hi ku tirhisa admin. Inkomu!
Show original language (Xitsonga) .
5 eka 5 Tinyeleti
United States
yi tsariwile tanihi nxopaxopo wa CodeCanyon

A hi ngheneni eka bindzu!

Click button ku vona tipulani!

Languta Tipulani!