Gridzy.Gallery

webLingala

Gridzy.Gallery
Bibliotɛkɛ ya JavaScript

Expérience ya photo ya kokamwa mingi oyo nakuti. Enfin mutu a comprendre ndenge nini kosala likambo oyo BIEN!

Milo Persic – mosaleli ya bibliothèque
Yekola Lisusu
Zwá Yango Sikoyo

Bososoli ya Noki

Mateya ya video ya miniti 1

kobeta mateya ya video

kaka miniti 1

Yekola likambo oyo na miniti moko mpamba:

Kosalela ya moboko

Configuration ya kosala

Ba filtres

Komonana

Sepelá mokolo yango
Pesá balingami na yo beze
Zala peto na yo moko
Kobosana te esengo
Yoka ndenge oyo ezali na bomoi

Ba Styles ya Caption

Ba styles ya caption prédéfini pona ba solutions ya mbangu ya pete

Botia bilili na loboko mpo na komona lolenge ya maloba ya nse ya lokasa oyo ebongisami. Sakana na ba boutons mpe ba pickers ya couleur mpo na ko configurer style intégré oyo elakisami.

Mikanda – Ba captions & Loposo

Ba Etiquettes & Ba Filtres

Mpo na kolakisa bililingi na yo na ndenge oyo ebongisami malamu

Système ya filtre intégré ezali très flexible. Le fait que ba sélecteurs CSS esalelamaka pona filtrage e permettre vraiment presque type nionso ya filtre.

Mikanda – Ba filtres

Ezali na boyokani makasi

Usable Na Ba Lightboxs Ebele

Sangisa galerie na lightbox nionso. Probabilité que ezala compatible ezali presque 100%. Finá bililingi mpo na komona esika oyo batyaka mwinda ya PhotoSwipe lokola ndakisa.

Ezali na ba articles ya blog oyo ezali na ba fragments ya code prêt:

Bobakisi – PhotoSwipe
Extension – Popup ya kokamwa

Flexible mingi

Sepelá mokolo yango
Pesá balingami na yo beze
Zala peto na yo moko
Kobosana te esengo
Yoka ndenge oyo ezali na bomoi

Bosala ba Styles Personnalisés

Soki oyebi CSS, okoki kosala style ya biloko ya galerie ndenge olingi.

CSS ya ndakisa oyo elakisami:

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

Salelá HTML nyonso

Okoki kosalela pene na HTML nyonso. Ezali kaka na bipekiseli moke mpenza. Bandakisa oyo emonisami awa nyonso mibale ebimisaka mbuma ya komona ndenge moko.

Mikanda – HTML ya sémantique

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

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

Makambo mosusu ya ntina mingi

Chargement ya paresseux

Ezali ko charger ba images na yo oyo otali noki

Yango ekɔtisaka kaka bililingi oyo ezali pene na esika oyo ezali komonana. Donc bande passante mingi pona ba images visible.

Mikanda – Chargement ya paresseux

API

Ezali kopesa yo nzela ya kosala makambo mingi koleka

Yango epesaka yo nzela ya kobakisa mpe kolongola bilili na ndenge ya programme, kobongola ba options to kosala réaction na ba événements.

Mikanda – API

Ba extensions

Epesaka yo ba solutions pona ba scénarios individuels

Ezali liboke ya masolo ya blog oyo ekolaka na boumeli ya ntango mpe ezali na biteni ya code oyo ekoki kosalisa mpo na koyeisa molai na pete Gridzy.Gallery .

Ba extensions

Mosaleli Na ntina na Bibliotɛkɛ

Nawuti kosangisa Gridzy na site na ngai mpe ezali ELOKO YA MALAMU! VIELEN DANK pona musala nionso otie na likambo oyo. Ezali expérience ya photo ya kokamwa koleka oyo nakuti. Enfin mutu a comprendre ndenge nini kosala likambo oyo BIEN!
Lakisa monoko ya ebandeli (Lingala)
5 na 5 Minzoto
Caroline du Nord – Etats-Unis
ekomami lokola botali ya CodeCanyon
Grille incroyable.. wow. highly optimized for speed.. Ekozala mpenza na bokebi mpo na mingi ya mosala ya 'art' ya Helmut.
Lakisa monoko ya ebandeli (Lingala)
5 na 5 Minzoto
Singapur, mboka
ekomami lokola botali ya CodeCanyon
Oyo ezali galerie ya grille justified oyo esalemi malamu mingi, oyo eleki malamu oyo nakuti tii sikoyo. Ezali komonana malamu kozanga ete ekɔta na nzela, eyanolaka malamu na bonene ya écran, ezali na ba options ya ntina mingi kozanga bagages oyo ezali na ntina te mpe ezali flexible na usage. D'ailleurs, auteur azali responsive, toujours aide, professionnel, amical mpe azali na javascript down pat.
Lakisa monoko ya ebandeli (Lingala)
5 na 5 Minzoto
Londres – Royaume-Uni
ekomami lokola botali ya CodeCanyon
Plugin oyo ezali ya kokamwa – Nakanisaki nakozala na mposa ya kolekisa mwa bangonga na kosala personnalisation kasi ezalaki mopepe. Na adaptaki yango mpo na kosala na Advanced Custom Fields kopesa ngai contrôle complet ya ndenge ba galeries na ngai ya WordPress esalemaka via admin. Matondi!
Lakisa monoko ya ebandeli (Lingala)
5 na 5 Minzoto
États-Unis
ekomami lokola botali ya CodeCanyon

Tokita na mosala!

Finá na butɔ mpo na kotala myango!

Talá Miango!