Gridzy.Gallery
JavaScript biblioteka
Najnevjerovatnije foto iskustvo koje sam pronašao. Konačno neko razumije kako to učiniti PRAVO!
Milo Peršić – korisnik biblioteke
Quick Insight
Video tutorijal od 1 minute
Naučite ovo za samo minut:
Osnovna upotreba
Konfiguracija
Filteri
Izgled
Stilovi natpisa
Unaprijed definirani stilovi natpisa za laka brza rješenja
Zadržite pokazivač miša na slikama da vidite konfigurirani stil natpisa. Igrajte se dugmadima i biračima boja kako biste konfigurirali prikazani ugrađeni stil.
Oznake i filteri
Za prikaz vaših slika na strukturiraniji način
Ugrađeni sistem filtera je izuzetno fleksibilan. Činjenica da se CSS selektori koriste za filtriranje zapravo omogućava gotovo svaku vrstu filtera.
Visoko kompatibilan
Upotrebljivo s mnogo svjetlosnih kutija
Kombinirajte galeriju s bilo kojim svjetlosnim okvirom. Vjerovatnoća da je kompatibilna je skoro 100%. Kliknite na slike da vidite PhotoSwipe okvir za pregled kao primjer.
Postoje članci na blogu sa gotovim isječcima koda:
Veoma fleksibilan
Kreirajte prilagođene stilove
Ako ste upoznati sa CSS-om, možete stilizirati stavke galerije onako 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 funkcija
Lazy Loading
Brže učitava vaše pregledane slike
Ovo učitava samo one slike koje su blizu vidljivog područja. Dakle, više propusnog opsega za vidljive slike.
API
Omogućava vam da uradite mnogo više
Ovo vam omogućava da programski dodajete i uklanjate slike, mijenjate opcije ili reagirate na događaje.
Ekstenzije
Pruža vam rješenja za pojedinačne scenarije
To je kolekcija članaka na blogu koji vremenom rastu i sadrže korisne isječke koda za jednostavno proširenje Gridzy.Gallery .
Korisnik O biblioteci
Hajdemo na posao!
Kliknite na dugme da pogledate planove!