Gridzy.Gallery
Pustaka Skript Java
Pangalaman foto paliang menakjubkan nan pernah ambo tamui. Akhirnyo ado nan mangarati baa caronyo mangarajoan iko BENAR!
Milo Persik – pangguno pustaka
Wawasan capek
Palajaran video 1 minik
Barajalah iko hanyo dalam saminggu:
Panggunoan dasar
Panyadioan
Saringan
Panampilan
Gaya Kaption
Gaya keterangan nan alah ditantuan sabalunnyo untuak solusi capek nan mudah
Arahkan kursor gambar untuak mancaliak gaya keterangan nan dikonfigurasi. Main jo tombol jo pamiliah warna untuak mangonfigurasi gaya bawaan nan ditunjukkan.
Tanda & Saringan
Untuak manampilkan gambar Sanak jo caro nan labiah tastruktur .
Sistem filter nan ado di dalamnyo sangaik fleksibel. Fakta bahaso pamiliah CSS digunoan untuak panyaringan sabananyo mamudahkan ampia sagalo jinih panyaringan.
Sangaik Sasuai
Dapek Digunoan Jo Banyak Kotak Lampu
Gabuangkan galeri jo kotak lampu apo sajo. Kemungkinan itu serasi ampia 100%. Klik gambar untuak mancaliak kotak lampu PhotoSwipe sabagai contoh.
Sangaik Fleksibel
Buek Gaya Khusus
Kalau sanak lah akrab jo CSS, sanak bisa manggayakan barang galeri sasuai jo caro nan sanak inginkan.
CSS dari contoh nan ditunjukkan:
/* 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;
}Gunoan HTML apo sajo
Sanak bisa mamakai HTML ampia apo sajo. Hanyo ado saketek bana pambatasan. Contoh nan ditunjukkan di siko kaduonyo mahasilkan hasil visual nan samo.
Contoh 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>Contoh 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 nan labiah baguno
Pamaleh mamuek
Mamuek gambar nan dicaliak labiah capek
Iko mamuek hanyo gambar nan dakek jo daerah nan tampak. Jadi labiah banyak bandwidth untuak gambar nan nampak.
API
Mamungkinkan Sanak untuak mangarajoan labiah banyak lai
Hal iko mamungkinkan Sanak untuak manambah jo maapuih gambar sacaro program, maubah piliahan atau bareaksi pado kajadian.
Panjang
Manyadiokan solusi untuak skenario masiang-masiang
Iko adolah kumpulan artikel blog nan bakambang dari wakatu ka wakatu dan barisi cuplikan kode nan mambantu untuak Gridzy.Gallery jo mudah.
Pangguno Tantang Perpustakaan
Mari kito turun ka usaho!
Klik tombol untuak mancaliak rencananyo!