Gridzy.Gallery

webShona

Gridzy.Gallery
JavaScript Library

Zvakanyanya zvinoshamisa mapikicha chiitiko chandakawana. Pakupedzisira mumwe munhu anonzwisisa kuita izvi ZVAKARURAMA!

Milo Persic - mushandisi weraibhurari
Dzidza zvimwe
Tora Ikozvino

Quick Insight

1 miniti vhidhiyo tutorial

tamba vhidhiyo tutori

1 miniti chete

Dzidza izvi muminiti imwe chete:

Basic kushandiswa

Configuration

Sefa

Chitarisiko

Pemberera zuva
Svoda vadikanwi vako
Iva wakachena pauri
Usakanganwa kufara
Inzwa hunhu

Caption Styles

Predefined caption styles kuti zvive nyore kukurumidza kugadzirisa

Saver mifananidzo kuti uone yakamisikidzwa caption style. Tamba nemabhatani uye vanhongeri vemavara kugadzirisa anoratidzwa akavakirwa-mukati maitiro.

Zvinyorwa - Zvinyorwa & Makanda

Tags & Mafirita

Kuti uratidze mifananidzo yako nenzira yakarongeka

Iyo yakavakirwa-mukati sefa system inoshanduka zvakanyanya. Icho chokwadi chekuti maCSS anosarudza anoshandiswa kusefa anogonesa chero chero rudzi rwesefa.

Zvinyorwa - Mafirita

Yakanyanya Kuenderana

Inoshandiswa NeMazhinji Lightboxes

Sanganisa iyo gallery nechero lightbox. Mukana wekuti inowirirana ingangoita 100%. Dzvanya mifananidzo kuti uone PhotoSwipe lightbox semuenzaniso.

Pane zvinyorwa zvebhurogu zvine akagadzirira-akagadzirwa kodhi snippets:

Kuwedzera - PhotoSwipe
Wedzero – Magnific Popup

Highly Flexible

Pemberera zuva
Svoda vadikanwi vako
Iva wakachena pauri
Usakanganwa kufara
Inzwa hunhu

Gadzira Maitiro Echinyakare

Kana iwe uchijairana neCSS, unogona kutayera ma gallery zvinhu nenzira yaunoda.

CSS yemuenzaniso wakaratidzwa:

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

Shandisa chero HTML

Iwe unogona kushandisa chero chero HTML. Pane ganhuriro shomanene bedzi. Mienzaniso inoratidzwa pano yese inoburitsa mhedzisiro yekuona yakafanana.

Zvinyorwa - Semantic HTML

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

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

Zvimwe Zvinobatsira Zvimiro

Simbe Loading

Inotakura mifananidzo yako yaunoona nekukurumidza

Izvi zvinotakura chete iyo mifananidzo iri padyo nenzvimbo inooneka. Saka yakawanda bandwidth yemifananidzo inooneka.

Documentation – Lazy Loading

API

Inokubvumira kuita zvakawanda

Izvi zvinokutendera kuti uwedzere uye ubvise mifananidzo zvakarongwa, shandura sarudzo kana kuita kune zviitiko.

Zvinyorwa - API

Extensions

Inokupa iwe nemhinduro kune ega ega mamiriro

Muunganidzwa wezvinyorwa zvebhurogu zvinokura nekufamba kwenguva uye zvine macode anobatsira ekuwedzera zviri nyore Gridzy.Gallery .

Extensions

Mushandisi Nezveraibhurari

Ini ndangobatanidza Gridzy mune yangu saiti uye ndicho CHINHU CHAKANAKA CHETE! VIELEN DANK yebasa rese raunoisa mune izvi. Ndiyo yakanyanya kushamisa mapikicha chiitiko chandakawana. Pakupedzisira mumwe munhu anonzwisisa kuita izvi ZVAKARURAMA!
Ratidza mutauro wekutanga (Chirungu)
5 kunze kwe5 Nyeredzi
North Carolina - United States
yakanyorwa seCodeCanyon wongororo
Incredible grid.. wow. yakagadzirisirwa zvakanyanya kumhanya.
Ratidza mutauro wekutanga (Chirungu)
5 kunze kwe5 Nyeredzi
Singapur
yakanyorwa seCodeCanyon wongororo
Iyi ndiyo yakanyatsogadzirwa justified grid gallery, yakanakisa yandakawana kusvika zvino. Inotaridzika zvakanaka pasina kupinda munzira, inopindura zvakanaka kune saizi yekrini, ine zvakawanda zvinobatsira sarudzo pasina mikwende isingakoshi uye inochinjika mukushandisa. Uyezve, munyori anopindura, anogara achibatsira, nyanzvi, ane hushamwari uye ane javascript pasi pat.
Ratidza mutauro wekutanga (Chirungu)
5 kunze kwe5 Nyeredzi
London - UK
yakanyorwa seCodeCanyon wongororo
Iyi plugin inoshamisa - ndaifunga kuti ndaizoda kupedza maawa mashoma ndichigadzirisa asi yaive mhepo. Ndakaigadzirisa kuti ishande neAdvanced Custom Fields ichindipa kutonga kwakazara kwemaitiro angu eWordPress ma gallery anogadzirwa kuburikidza ne admin. Ndatenda!
Ratidza mutauro wekutanga (Chirungu)
5 kunze kwe5 Nyeredzi
Nyika dzakabatana
yakanyorwa seCodeCanyon wongororo

Ngatidzikei kubhizinesi!

Dzvanya bhatani kuti utarise zvirongwa!

Tarisa Zvirongwa!