Gridzy.Gallery

webIkirundi

Gridzy.Gallery
Ububiko bw'inyandiko za Java

Ivyiza vy’amafoto bitangaje cane nabonye. Ubwanyuma umuntu atahura ingene ivyo bikorwa BIKOMEYE!

Milo Persic – umukoresha w’ububiko bw’ibitabu
Menya vyinshi
Bironke ubu

Ubumenyi bwihuta

Inyigisho ya videwo y'umunota umwe

gukina amasanamu y'inyigisho

umunota umwe gusa

Ivyo ubimenye mu munota umwe gusa:

Ikoreshwa ry'ishimikiro

Gutunganya

Ayunguruzo

Isura

Himbaza uwo musi
Soma abakunzi bawe
Niwisukure muri wewe nyene .
Ntimwibagire umunezero
Numve kamere

Uburyo bwo kwandika

Uburyo bw'amajambo bwasobanuwe mbere y'igihe kugira ngo ubone inyishu zoroshe

Hagarara amashusho kugira ngo ubone uburyo bw'amajambo yatunganijwe. Gukina n'amabuto n'ibitora amabara kugira ngo utunganye uburyo bwubatswemwo.

Inyandiko – Insobanuro n'inkovu

Ibimenyetso n'Iyunguruzo

Kugira ngo ugaragaze amashusho yawe mu buryo butunganijwe neza

Uburyo bwo kuyungurura bushizwemwo burahinduka cane. Kuba abahitamwo CSS bakoreshwa mu kuyungurura mu vy'ukuri birashoboza hafi ubwoko bwose bw'akayunguruzo.

Inyandiko – Ayunguruzo

Bihuye cane

Ikoreshwa n'amasandugu menshi y'umuco

Ifatanije n’agasanduku k’umuco ako ari ko kose. Ivyo bishoboka ko bihuye ni hafi 100%. Fyonda ku mashusho kugira ngo ubone akazu k'umuco ka PhotoSwipe nk'akarorero.

Hariho ingingo z'urubuga zifise ibice vya kode vyiteguye:

Ukwagura – Gukubita amafoto
Ukwagura – Igitangaza Popup

Guhinduranya cane

Himbaza uwo musi
Soma abakunzi bawe
Niwisukure muri wewe nyene .
Ntimwibagire umunezero
Numve kamere

Rema uburyo bwihariye

Niba umenyereye CSS, urashobora guhindura ibintu vyo mu nzu y’ibarabara uko ushaka.

CSS y'akarorero karekanwa:

/* 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;
}
Inyandiko – Uburyo Gridzy

Koresha HTML iyo ari yo yose

Ushobora gukoresha hafi HTML yose. Hariho gusa amategeko make cane. Ingero zigaragazwa ngaha zompi zitanga ingaruka imwe y’ivyo umuntu abona.

Inyandiko – HTML y'insobanuro

Akarorero ka 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>

Akarorero ka 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>

Ibindi biranga ngirakamaro

Ubunebwe bwo kwikorera

Ishiramwo amashusho yawe wabonye ningoga

Ivyo bica bishiramwo gusa ayo mashusho ari hafi y’aho aboneka. Rero bandwidth nyinshi ku mashusho aboneka.

Inyandiko – Gushiramwo ubunebwe

API

Biguha uburenganzira bwo gukora vyinshi

Ivyo bigufasha kwongerako no gukuraho amashusho mu buryo bwa porogarama, guhindura amahitamwo canke gukora ku bintu bibaye.

Inyandiko – API

Ukwagura

Iguha inyishu ku bibazo vy'umuntu ku giti ciwe

Ni ihuriro ry'ingingo z'urubuga zikura uko igihe kigenda kirarenga kandi zirimwo ibice vy'amakode bifasha kwagura Gridzy.Gallery .

Ukwagura

Ukoresha Ivyerekeye ububiko bw'ibitabu

Naciye nshiramwo Gridzy mu rubuga rwanje kandi ni co kintu ciza kuruta ibindi vyose! VIELEN DANK ku bikorwa vyose mwashize muri ivyo. Ni ubumenyi bw’amafoto butangaje kuruta ubundi bwose nabonye. Ubwanyuma umuntu aratahura ingene ivyo bikorwa BIKOMEYE!
Erekana ururimi rw'umwimerere (Icongereza)
Inyenyeri 5 kuri 5
Caroline yo mu Buraruko – Leta Zunze Ubumwe za Amerika
yanditswe nk'isubiramwo rya CodeCanyon
Igishushanyo kidasanzwe.. wow. n'ibindi vyiza cane kubera umuvuduko.. Nta gukeka ko azoba ariko araba ibindi bikorwa vya Helmut vy''ubuhinga'.
Erekana ururimi rw'umwimerere (Icongereza)
Inyenyeri 5 kuri 5
Singapur
yanditswe nk'isubiramwo rya CodeCanyon
Iyi ni gallery y’uruzitiro justified yatunganijwe neza cane, ni nziza kuruta izindi zose nasanze gushika ubu. Iraboneka neza ataco yinjira mu nzira, yishura neza ku bunini bw’igicapo, ifise uburyo bwinshi bw’ingirakamaro ata n’ibintu bidakenewe kandi irashobora guhinduka iyo ikoreshwa. Ikindi kandi, umwanditsi arasubiza, yama afasha, ni umuhinga, ni umugenzi kandi afise javascript down pat.
Erekana ururimi rw'umwimerere (Icongereza)
Inyenyeri 5 kuri 5
Londres – Ubwongereza
yanditswe nk'isubiramwo rya CodeCanyon
Iyi plugin iratangaje – niyumvira ko nokenera kumara amasaha makeyi nkora customization ariko vyari umuyaga. Narayihinduye kugira ngo ikore n’Ibibanza vy’Igihugu Biteye imbere bimpa ububasha bwose ku kuntu amabarabara yanje ya WordPress aremwa biciye ku muyobozi. Murakoze!
Erekana ururimi rw'umwimerere (Icongereza)
Inyenyeri 5 kuri 5
Leta Zunze Ubumwe za Amerika
yanditswe nk'isubiramwo rya CodeCanyon

Reka twinjire mu bikorwa!

Fyonda kuri buto kugira ngo ubone imigambi!

Raba Imigambi!