Gridzy.Gallery
JavaScript Kütüphanesi
Bulduğum en muhteşem fotoğraf deneyimi. Sonunda birisi bunu DOĞRU şekilde nasıl yapacağını anlıyor!
Milo Persic – kütüphanenin bir kullanıcısı
Hızlı Bakış
1 dakikalık video eğitimi
Bunu bir dakikada öğrenin:
Temel kullanım
Yapılandırma
Filtreler
Dış görünüş
Başlık Stilleri
Kolay ve hızlı çözümler için önceden tanımlanmış başlık stilleri
Yapılandırılan başlık stilini görmek için görsellerin üzerine gelin. Gösterilen yerleşik stili yapılandırmak için düğmeler ve renk seçicilerle oynayın.
Etiketler ve Filtreler
Görüntülerinizi daha yapılandırılmış bir şekilde görüntülemek için
Dahili filtre sistemi son derece esnektir. CSS seçicilerinin filtreleme için kullanılması aslında hemen hemen her tür filtreyi mümkün kılar.
Son derece uyumlu
Birçok Lightbox ile Kullanılabilir
Galeriyi herhangi bir lightbox ile birleştirin. Uyumlu olma olasılığı neredeyse %100'dür. Örnek olarak PhotoSwipe lightbox'ı görmek için görsellere tıklayın.
Son derece esnek
Özel Stiller Oluştur
CSS'e aşinaysanız galeri öğelerini istediğiniz şekilde biçimlendirebilirsiniz.
Gösterilen örneğin CSS'si:
/* 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;
}Herhangi bir HTML kullanın
Hemen hemen her HTML'i kullanabilirsiniz. Çok az kısıtlama vardır. Burada gösterilen örnekler aynı görsel sonucu üretir.
Örnek 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>Örnek 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>Daha Faydalı Özellikler
Tembel Yükleme
Görüntülenen görsellerinizi daha hızlı yükler
Bu yalnızca görünür alana yakın olan görüntüleri yükler. Bu nedenle görünür görüntüler için daha fazla bant genişliği.
API
Çok daha fazlasını yapmanıza olanak tanır
Bu, programlı olarak resim eklemenize ve kaldırmanıza, seçenekleri değiştirmenize veya olaylara tepki vermenize olanak tanır.
Uzantılar
Size bireysel senaryolar için çözümler sunar
Zamanla büyüyen ve Gridzy.Gallery kolayca genişletmek için yararlı kod parçacıkları içeren bir blog makaleleri koleksiyonudur.
Kullanıcı Kütüphane Hakkında
Hadi işe koyulalım!
Planlara göz atmak için butona tıklayın!