Gridzy.Gallery
JavaScript knjižnica
Najčudesnije fotografsko iskustvo koje sam pronašao. Napokon netko razumije kako to učiniti ISPRAVNO!
Milo Peršić – korisnik knjižnice
Brzi uvid
1 minutni video vodič
Naučite ovo za samo minutu:
Osnovna uporaba
Konfiguracija
Filteri
Izgled
Stilovi naslova
Unaprijed definirani stilovi opisa za laka brza rješenja
Zadržite pokazivač miša nad slikama da biste vidjeli konfigurirani stil opisa. Igrajte se s gumbima i alatima za odabir boja kako biste konfigurirali prikazani ugrađeni stil.
Oznake i filtri
Za prikaz vaših slika na strukturiraniji način
Ugrađeni sustav filtera izuzetno je fleksibilan. Činjenica da se CSS selektori koriste za filtriranje zapravo omogućuje gotovo sve vrste filtera.
Vrlo kompatibilan
Može se koristiti s mnogim svjetlosnim okvirima
Kombinirajte galeriju s bilo kojim svjetlosnim okvirom. Vjerojatnost da je kompatibilan je gotovo 100%. Pritisnite slike da biste vidjeli PhotoSwipe lightbox kao primjer.
Postoje članci bloga s gotovim isječcima koda:
Vrlo fleksibilan
Stvorite prilagođene stilove
Ako ste upoznati s CSS-om, možete stilizirati stavke galerije kako želite.
CSS prikazanog primjera:
/* 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;
}Koristite bilo koji HTML
Možete koristiti gotovo bilo koji HTML. Postoji samo nekoliko ograničenja. Ovdje prikazani primjeri daju isti vizualni rezultat.
Primjer 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>Primjer 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>Više korisnih značajki
Lijeno učitavanje
Brže učitava vaše gledane slike
Ovo učitava samo one slike koje su blizu vidljivog područja. Dakle, veća propusnost za vidljive slike.
API
Omogućuje vam da učinite mnogo više
To vam omogućuje programsko dodavanje i uklanjanje slika, promjenu opcija ili reagiranje na događaje.
Ekstenzije
Pruža vam rješenja za pojedinačne scenarije
To je zbirka blog članaka koji rastu tijekom vremena i sadrže korisne isječke koda za jednostavno proširenje Gridzy.Gallery .
Korisnik O knjižnici
Bacimo se na posao!
Kliknite gumb da provjerite planove!