Gridzy.Gallery
JavaScript-kirjasto
Upein valokuvakokemus, jonka olen löytänyt. Vihdoinkin joku ymmärtää, miten tämä tehdään OIKEIN!
Milo Persic – kirjaston käyttäjä
Pikakatsaus
1 minuutin opetusvideo
Opi tämä hetkessä:
Peruskäyttö
Kokoonpano
Suodattimet
Ulkonäkö
Tekstitystyylit
Ennalta määritetyt tekstitystyylit helppoja nopeita ratkaisuja varten
Vie hiiri kuvien päälle nähdäksesi määritetyn kuvatekstityylin. Pelaa painikkeilla ja värivalitsimilla määrittääksesi näytetyn sisäänrakennetun tyylin.
Tunnisteet ja suodattimet
Voit näyttää kuviasi jäsennellymmin
Sisäänrakennettu suodatinjärjestelmä on erittäin joustava. Se, että suodatukseen käytetään CSS-valitsimia, mahdollistaa melkein minkä tahansa suodattimen.
Erittäin yhteensopiva
Käytettävissä monien valolaatikoiden kanssa
Yhdistä galleria mihin tahansa valolaatikkoon. Todennäköisyys, että se on yhteensopiva, on lähes 100%. Napsauta kuvia nähdäksesi PhotoSwipe-valolaatikon esimerkkinä.
Blogissa on artikkeleita, joissa on valmiita koodinpätkiä:
Erittäin joustava
Luo mukautettuja tyylejä
Jos olet perehtynyt CSS:ään, voit muotoilla gallerian kohteet haluamallasi tavalla.
Näytetyn esimerkin 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;
}Käytä mitä tahansa HTML-koodia
Voit käyttää melkein mitä tahansa HTML-koodia. Rajoja on vain hyvin vähän. Tässä esitetyt esimerkit tuottavat molemmat saman visuaalisen tuloksen.
Esimerkki 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>Esimerkki 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>Lisää hyödyllisiä ominaisuuksia
Laiska lataus
Lataa katsomasi kuvat nopeammin
Tämä lataa vain ne kuvat, jotka ovat lähellä näkyvää aluetta. Joten enemmän kaistanleveyttä näkyville kuville.
API
Antaa sinun tehdä paljon enemmän
Tämän avulla voit lisätä ja poistaa kuvia ohjelmallisesti, muuttaa vaihtoehtoja tai reagoida tapahtumiin.
Laajennukset
Tarjoaa ratkaisuja yksittäisiin skenaarioihin
Se on kokoelma blogiartikkeleita, jotka kasvavat ajan myötä ja sisältävät hyödyllisiä koodinpätkiä, joiden avulla voit helposti laajentaa Gridzy.Gallery .
Käyttäjä Tietoja kirjastosta
Mennään asiaan!
Klikkaa nappia ja tutustu suunnitelmiin!