Gridzy.Gallery
Perpustakaan JavaScript
Pangalaman poto anu paling endah anu kuring mendakan. Tungtungna batur ngartos kumaha ngalakukeun ieu BENER!
Milo Persic - pamaké perpustakaan
Wawasan Gancang
1 menit video tutorial
Diajar ieu dina ngan hiji menit:
Pamakéan dasar
Konfigurasi
Saringan
Penampilan
Gaya Caption
Gaya caption anu tos ditetepkeun pikeun solusi gancang anu gampang
Hover gambar pikeun ningali gaya caption anu dikonpigurasikeun. Puter sareng tombol sareng pamilih warna pikeun ngonpigurasikeun gaya anu diwangun.
Tag & Saringan
Pikeun mintonkeun gambar anjeun dina cara nu leuwih terstruktur
Sistim filter diwangun-di pisan fléksibel. Kanyataan yén pamilih CSS dianggo pikeun nyaring saleresna ngamungkinkeun ampir sagala jinis saringan.
Cocog pisan
Bisa Dianggo Jeung Loba Lightboxes
Gabungkeun galeri sareng kotak lampu naon waé. Kamungkinan yén éta cocog ampir 100%. Pencét gambar pikeun ningali kotak cahaya PhotoSwipe sabagé conto.
Kacida Fleksibel
Jieun Styles Adat
Mun anjeun wawuh jeung CSS, anjeun tiasa gaya item galeri cara rék.
CSS tina conto anu dipidangkeun:
/* 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;
}Anggo HTML naon waé
Anjeun tiasa make ampir sagala HTML. Aya ngan saeutik pisan larangan. Conto anu dipidangkeun di dieu duanana ngahasilkeun hasil visual anu sami.
Conto 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>Conto 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 langkung Mangpaat
Puguh Loading
Ngamuat gambar anu anjeun tingali langkung gancang
Ieu ngamuat ngan ukur gambar anu caket sareng daérah anu katingali. Jadi leuwih rubakpita pikeun gambar katempo.
API
Ngidinan anjeun ngalakukeun langkung seueur
Ieu ngidinan Anjeun pikeun nambahkeun jeung cabut gambar programmatically, ngarobah pilihan atawa meta pikeun acara.
Ékstensi
Nyadiakeun anjeun solusi pikeun skenario individu
Ieu kumpulan artikel blog nu tumuwuh ngaliwatan waktu sarta ngandung snippét kode mantuan pikeun gampang manjangkeun Gridzy.Gallery .
Pamaké Ngeunaan Perpustakaan
Hayu urang turun kana bisnis!
Pencét tombol pikeun pariksa rencana!