Gridzy.Gallery
Pustaka JavaScript
Pengalaman foto sing paling apik tenan sing daktemu. Akhire ana sing ngerti carane nindakake iki RIGHT!
Milo Persic - pangguna perpustakaan
Wawasan Cepet
1 menit video tutorial
Sinau iki mung sak menit:
Panggunaan dhasar
Konfigurasi
Filter-filter
Penampilan
Gaya Caption
Gaya caption sing wis ditemtokake kanggo solusi cepet sing gampang
Kisaran gambar kanggo ndeleng gaya caption sing dikonfigurasi. Muter tombol lan pemilih warna kanggo ngatur gaya sing dibangun.
Tag & Filter
Kanggo nampilake gambar kanthi cara sing luwih terstruktur
Sistem panyaring sing dibangun banget fleksibel. Kasunyatan manawa pamilih CSS digunakake kanggo nyaring bener-bener ngidini meh kabeh jinis filter.
Highly Kompatibel
Bisa Digunakake Kanthi Akeh Lightboxes
Gabungake galeri karo kothak lampu apa wae. Kemungkinan sing kompatibel meh 100%. Klik gambar kanggo ndeleng kothak cahya PhotoSwipe minangka conto.
Ana artikel blog kanthi potongan kode sing wis siap:
Fleksibel banget
Nggawe Gaya Custom
Yen sampeyan kenal karo CSS, sampeyan bisa nggawe gaya item galeri kaya sing dikarepake.
CSS conto sing ditampilake:
/* 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;
}Gunakake HTML apa wae
Sampeyan bisa nggunakake meh kabeh HTML. Ana mung sawetara watesan. Conto sing ditampilake ing kene loro-lorone ngasilake asil visual sing padha.
Tuladha 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>Tuladha 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>Fitur liyane Migunani
Lazy Loading
Muat gambar sing dideleng luwih cepet
Iki mung ngemot gambar sing cedhak karo area sing katon. Dadi luwih bandwidth kanggo gambar sing katon.
API
Ngidini sampeyan nindakake luwih akeh
Iki ngidini sampeyan nambah lan mbusak gambar kanthi program, ngganti opsi utawa nanggepi acara.
Ekstensi
Menehi solusi kanggo skenario individu
Iki minangka kumpulan artikel blog sing saya suwe saya suwe lan ngemot potongan kode sing migunani kanggo nambah Gridzy.Gallery kanthi gampang.
Panganggo Babagan Pustaka
Ayo dadi mudhun kanggo bisnis!
Klik tombol kanggo mriksa rencana!