Gridzy.Gallery

webEesti keel

Gridzy.Gallery
JavaScripti teek

Kõige hämmastavam fotokogemus, mille olen leidnud. Lõpuks ometi saab keegi aru, kuidas seda ÕIGESTI teha!

Milo Persic – raamatukogu kasutaja
Lisateave
Hankige kohe

Kiire ülevaade

1-minutiline videoõpetus

mängida videoõpetust

ainult 1 minut

Õppige seda vaid minutiga:

Põhikasutus

Seadistamine

Filtrid

Välimus

Tähistage päeva
Suudle oma lähedasi
Ole endaga puhas
Ärge unustage lõbu
Tunneta loodust

Tiitrite stiilid

Eelmääratletud pealdistiilid lihtsate kiirete lahenduste jaoks

Hõljutage kursorit piltide peal, et näha konfigureeritud subtiitrite stiili. Näidatud sisseehitatud stiili konfigureerimiseks mängige nuppude ja värvivalijatega.

Dokumentatsioon – pealdised ja pealdised

Sildid ja filtrid

Piltide struktureeritumalt kuvamiseks

Sisseehitatud filtrisüsteem on äärmiselt paindlik. Asjaolu, et filtreerimiseks kasutatakse CSS-i valijaid, võimaldab peaaegu igat tüüpi filtreid.

Dokumentatsioon – filtrid

Väga ühilduv

Kasutatav paljude valguskastidega

Kombineerige galerii mis tahes valguskastiga. Tõenäosus, et see ühildub, on peaaegu 100%. Klõpsake pilte, et näha PhotoSwipe'i valguskasti näitena.

Blogiartikleid on valmis koodijuppidega:

Laiendus – PhotoSwipe
Laiendus – Magnific hüpikaken

Väga paindlik

Tähistage päeva
Suudle oma lähedasi
Ole endaga puhas
Ärge unustage lõbu
Tunneta loodust

Loo kohandatud stiile

Kui olete CSS-iga tuttav, saate galerii üksuseid soovitud viisil kujundada.

Näidatud näite CSS:

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

Kasutage mis tahes HTML-i

Saate kasutada peaaegu iga HTML-i. Piiranguid on väga vähe. Siin näidatud näited annavad mõlemad sama visuaalse tulemuse.

Dokumentatsioon – semantiline HTML

Näide 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>

Näide 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>

Veel kasulikke funktsioone

Laisk laadimine

Laadib teie vaadatud pildid kiiremini

See laadib ainult need pildid, mis on nähtava ala lähedal. Nii et nähtavate piltide jaoks on rohkem ribalaiust.

Dokumentatsioon – laisk laadimine

API

Võimaldab teha palju rohkem

See võimaldab pilte programmiliselt lisada ja eemaldada, valikuid muuta või sündmustele reageerida.

Dokumentatsioon – API

Laiendused

Pakub teile lahendusi üksikute stsenaariumide jaoks

See on ajaveebiartiklite kogu, mis aja jooksul kasvab ja sisaldab kasulikke koodilõike, et hõlpsasti laiendada Gridzy.Gallery .

Laiendused

Kasutaja Teave raamatukogu kohta

Integreerisin just Gridzy oma saidile ja see on PARIM ASI kunagi! VIELEN DANK kogu selle töö eest. See on kõige hämmastavam fotokogemus, mille olen leidnud. Lõpuks ometi saab keegi aru, kuidas seda ÕIGESTI teha!
Kuva originaalkeel (inglise)
5 tärni 5-st
Põhja-Carolina – Ameerika Ühendriigid
kirjutatud CodeCanyoni ülevaatena
Uskumatu ruudustik... vau. väga optimeeritud kiiruse jaoks. Kindlasti jälgin rohkem Helmuti kunstiteoseid
Kuva originaalkeel (inglise)
5 tärni 5-st
Singapur
kirjutatud CodeCanyoni ülevaatena
See on väga hästi kujundatud justified ruudustiku galerii, mis on siiani parim, mida olen leidnud. See näeb hea välja ilma segamata, reageerib hästi ekraani suurusele, sellel on palju kasulikke valikuid ilma tarbetu pagasita ja see on kasutamisel paindlik. Lisaks on autor vastutulelik, alati abivalmis, professionaalne, sõbralik ja tal on javascripti alla pai.
Kuva originaalkeel (inglise)
5 tärni 5-st
London – Suurbritannia
kirjutatud CodeCanyoni ülevaatena
See pistikprogramm on hämmastav – arvasin, et pean paar tundi kohandamiseks kulutama, kuid see oli imelihtne. Kohandasin selle töötama koos Advanced Custom Fieldsiga, andes mulle täieliku kontrolli selle üle, kuidas minu WordPressi galeriid administraatori kaudu luuakse. Aitäh!
Kuva originaalkeel (inglise)
5 tärni 5-st
Ameerika Ühendriigid
kirjutatud CodeCanyoni ülevaatena

Asume asja kallale!

Plaanidega tutvumiseks klõpsake nuppu!

Tutvu plaanidega!