Gridzy.Gallery
JavaScript nisqa biblioteca
Aswan admirakuypaq foto experiencia tarisqay. Tukuyninpiqa pipas entienden imaynatas kayta ALLINTA ruwananta!
Milo Persic – bibliotecamanta llamk'aq
Utqaylla Rikuy
1 minuto video yachachiy
Huk minutollapi kayta yachay:
Uso básico nisqa
Configuración nisqa
Filtrokuna
Rikchaynin
Estilos de Capción nisqa
Ñawpaqmanta riqsisqa qillqakuna estilokuna mana sasa utqaylla allichaykunapaq
Siqikunata kuyuchiy, wakichisqa qillqap rikch'ayninta qhawanaykipaq. Pukllay botoneswan chaymanta color akllaqkunawan rikuchisqa ruwasqa estilota ruwanapaq.
Etiquetas & Filtros nisqakuna
Aswan allin ruwasqa siq’iykikunata qhawachinaykipaq
Chay ukhupi ruwasqa filtro sistemaqa ancha flexible. CSS akllaqkuna filtracionpaq llamk'achisqa kasqanqa chiqamanta yaqa mayqin laya filtrotapas atichin.
Altamente Compatible nisqa
Achka Lightboxkunawan Utilizakuq
Ima k’anchay cajawanpas galería nisqa huñuy. Chay probabilidad chay compatible nisqa yaqa 100%. Siqikunata ñit'iy PhotoSwipe k'anchay qututa huk rikch'ana hina qhawanaykipaq.
Kanmi blog qillqakuna listo ruwasqa codigo fragmentokunayuq:
Altamente Flexible
Estilos Personalizados nisqakunata ruway
Sichus CSS kaqwan riqsisqa kanki, galería kaqpi imakuna munasqaykimanhina estilochayta atikunki.
CSS rikuchisqa rikch'anamanta:
/* 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;
}Ima HTMLtapas llamk'achiy
Yaqa llapa HTML nisqakunatan utilizawaq. Ancha pisillam harkakuykuna kan. Kaypi rikuchisqa ejemplokunaqa iskayninkum kaqlla qawanapaq ruwayta ruwanku.
Ejemplo 1: 1.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>Ejemplo 2: 1.1.
<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>Aswan allin ruwaykuna
Qella Carga
Qhawasqa siq'iykikunata aswan utqaylla kargan
Kayqa rikukuq kitiman qaylla kaq siq'ikunallatam kargakun. Chaymi aswan banda ancho rikukuq siq'ikunapaq.
API nisqa
Aswan achkata ruwanaykipaqmi saqisunki
Kayqa programamanta siq'ikunata yapayta chaymanta hurquyta, akllanakunata tikrayta utaq ruwaykunaman kutichiyta atikun.
Mast’ariykuna
Sapa escenariokunapaq solucionkunata qusunki
Huk huñusqa blog qillqakuna kanku chaymanta pachawan wiñan chaymanta yanapakuq código fragmentokunayuq kanku mana sasachu mast'arinankupaq Gridzy.Gallery .
Usuario Bibliotecamanta
¡Hakuyku negocioman!
¡Chay botonta ñit’iy plankunata qhawanaykipaq!