Gridzy.Gallery
JavaScript Liburutegia
Aurkitu dudan argazki esperientziarik harrigarriena. Azkenean, norbaitek ulertzen du nola egin ZUZEN!
Milo Persic – liburutegiaren erabiltzailea
Ikuspegi azkarra
1 minutuko bideo tutoriala
Ikasi hau minutu batean:
Oinarrizko erabilera
Konfigurazioa
Iragazkiak
Itxura
Epigrafeen estiloak
Aurrez definitutako epigrafe-estiloak irtenbide azkar errazetarako
Pasatu irudiak konfiguratutako epigrafeen estiloa ikusteko. Jolastu botoiekin eta kolore-hautatzaileek erakutsitako estilo integratua konfiguratzeko.
Etiketak eta iragazkiak
Zure irudiak modu egituratuagoan bistaratzeko
Iragazki sistema integratua oso malgua da. CSS hautatzaileak iragazteko erabiltzen direnez, ia edozein motatako iragazki gaitzen dira.
Oso bateragarria
Argi-kutxa askorekin erabil daiteke
Konbinatu galeria edozein argi-kutxarekin. Bateragarria izateko probabilitatea ia % 100ekoa da. Egin klik irudietan PhotoSwipe argi-koadroa adibide gisa ikusteko.
Badaude blogeko artikuluak prest egindako kode zatiekin:
Oso malgua
Sortu estilo pertsonalizatuak
CSS ezagutzen baduzu, galeriako elementuak nahi duzun moduan estilo ditzakezu.
Erakutsitako adibidearen CSS:
/* 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;
}Erabili edozein HTML
Ia edozein HTML erabil dezakezu. Oso murrizketa gutxi daude. Hemen erakusten diren adibideek biek emaitza bisual bera sortzen dute.
1. adibidea:
<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>2. adibidea:
<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>Ezaugarri erabilgarriagoak
Karga alferra
Ikusitako irudiak azkarrago kargatzen ditu
Honek ikusgai dagoen eremutik hurbil dauden irudiak soilik kargatzen ditu. Beraz, banda zabalera gehiago ikusgai dauden irudietarako.
APIa
Askoz gehiago egiteko aukera ematen dizu
Horri esker, irudiak programatikoki gehitu eta ken ditzakezu, aukerak alda ditzakezu edo gertaeren aurrean erreakzionatu.
Luzapenak
Banakako eszenatokietarako irtenbideak eskaintzen dizkizu
Denborarekin hazten diren eta Gridzy.Gallery erraz zabaltzeko kode zati lagungarriak dituzten blog-artikuluen bilduma bat da.
Erabiltzailea Liburutegiari buruz
Jar gaitezen negozioari!
Egin klik botoian planoak ikusteko!