Gridzy.Gallery

webTok Pisin

Gridzy.Gallery
JavaScript Library

Nambawan gutpela poto ekspiriens mi bin painim. Long pinis wanpela i kliagut long hau long mekim dispela stret!

Milo Persic – wanpela yusa bilong laibreri
Lainim Moa
Kisim Nau

Kwik Luksave

1 minit vidio tutorial

pilaim vidio tutorial

wanpela minit tasol

Lainim dispela insait long wanpela minit tasol:

Besik yusim

Konfigurasen

Ol filta

Lukluk

Amamas long dispela de
Kisim ol lain yu laikim
Stap klin wantaim yu yet
Noken lusim tingting long amamas
Pilim nature

Stail bilong Kapsen

Ol stail bilong ol toksave we ol i makim pinis bilong isi na kwikpela rot bilong stretim hevi

Putim 'hover' long ol piksa long lukim stail bilong 'caption'. Pilai wantaim ol baten na ol kala pika long stretim stail we i stap insait long en.

Dokumentesen – Ol Toktok na Skin

Ol Tag na Filta

Long soim ol piksa bilong yu long gutpela rot

Filta sistem we i stap insait long en em i gutpela tru. Tru tumas olsem ol i save yusim ol CSS selekta long filterim na dispela i mekim klostu olgeta kain filta i ken kamap.

Dokumentesen – Ol Filta

Em i stret tru

Yu ken yusim wantaim planti laitboks

Bungim galari wantaim wanpela laitboks. Probabiliti bilong em i ken wok wantaim em klostu 100%. Klikim ol piksa long lukim PhotoSwipe laitboks olsem wanpela eksampel.

I gat ol blog atikol wantaim ol redi-meid kod snipet:

Ekstensen – PhotoSwipe
Ekstensen – Magnifik Popup

Em i save senis senis

Amamas long dispela de
Kisim ol lain yu laikim
Stap klin wantaim yu yet
Noken lusim tingting long amamas
Pilim nature

Wokim ol kastom stail

Sapos yu save long CSS, yu ken stailim ol samting bilong galeri long wei yu laikim.

CSS bilong eksampel:

/* 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;
}
Dokumentesen – Stail Gridzy

Yusim wanem kain HTML

Yu ken yusim klostu olgeta HTML. I gat liklik tambu tasol. Ol eksampel we i stap hia tupela i kamapim wankain piksa.

Dokumentesen – Semantik HTML

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

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

Moa Gutpela Samting

Les long lodim

I save putim ol piksa yu lukim hariap

Dispela i save putim ol piksa tasol we i stap klostu long hap yu ken lukim. Olsem na moa 'bandwidth' bilong ol piksa we yu ken lukim.

Dokumentesen – Les Loading

API

Larim yu long mekim planti moa samting

Dispela i larim yu long putim na rausim ol piksa long rot bilong program, senisim ol opsen o mekim samting long ol samting i kamap.

Dokumentesen – API

Ol ekstensen

Givim yu ol rot bilong stretim ol wanwan samting

Em i wanpela koleksen bilong ol blog atikol we i save groa long taim na i gat ol gutpela kod snipet bilong isi long skruim Gridzy.Gallery .

Ol ekstensen

Yusa Long Laibreri

Mi putim Gridzy insait long sait bilong mi na em i nambawan samting tru! VIELEN DANK long olgeta wok yu putim long dispela. Em i nambawan gutpela poto ekspiriens mi bin painim. Long pinis wanpela i klia long hau long mekim dispela stret!
Soim asples tokples (Inglis)
5 aut long 5 sta
Not Karolaina – Yunaitet Stets
raitim olsem wanpela CodeCanyon riviu
Gutpela grid tru.. wow. i gutpela tru long spit.. Bai mi lukluk gut long moa wok bilong Helmut long 'art'
Soim asples tokples (Inglis)
5 aut long 5 sta
Singapur
raitim olsem wanpela CodeCanyon riviu
Dispela em i wanpela gutpela justified grid galari we ol i wokim gut tru, em i nambawan mi painim inap nau. Em i luk gut na i no gat samting i pasim rot, em i wok gut long sais bilong skrin, i gat planti gutpela opsen na i no gat ol hevi na em i isi long yusim. Na tu, man i raitim dispela buk em i save bekim tok, em i save helpim oltaim, em i save mekim gutpela wok, em i pren na em i gat 'javascript'.
Soim asples tokples (Inglis)
5 aut long 5 sta
London – UK
raitim olsem wanpela CodeCanyon riviu
Dispela 'plugin' em i gutpela tru - mi ting mi mas lusim sampela aua long stretim tasol em i isi tru. Mi senisim em long wok wantaim Advanced Custom Fields we i givim mi ful kontrol long hau ol WordPress galeri bilong mi i kamap long rot bilong edmin. Tenkyu!
Soim asples tokples (Inglis)
5 aut long 5 sta
Yunaitet Stets
raitim olsem wanpela CodeCanyon riviu

Yumi go daun long wok!

Klikim baten long sekim ol plen!

Lukim ol plen!