Gridzy.Gallery
JavaScript Kitabxanası
Tapdığım ən heyrətamiz foto təcrübəsi. Nəhayət, kimsə bunu DÜZGÜN necə edəcəyini başa düşür!
Milo Persic – kitabxananın istifadəçisi
Quick Insight
1 dəqiqəlik video dərslik
Bunu bir dəqiqə ərzində öyrənin:
Əsas istifadə
Konfiqurasiya
Filtrlər
Görünüş
Başlıq üslubları
Asan sürətli həllər üçün əvvəlcədən təyin edilmiş başlıq üslubları
Konfiqurasiya edilmiş başlıq üslubunu görmək üçün şəkillərin üzərinə sürüşdürün. Göstərilən daxili üslubu konfiqurasiya etmək üçün düymələr və rəng seçiciləri ilə oynayın.
Teqlər və Filtrlər
Şəkillərinizi daha strukturlaşdırılmış şəkildə göstərmək üçün
Daxili filtr sistemi son dərəcə çevikdir. CSS selektorlarının filtrləmə üçün istifadə edilməsi faktiki olaraq demək olar ki, hər növ filtrə imkan verir.
Yüksək Uyğundur
Bir çox Lightbox ilə istifadə edilə bilər
Qalereyanı istənilən işıq qutusu ilə birləşdirin. Uyğunluq ehtimalı demək olar ki, 100% -dir. Nümunə olaraq PhotoSwipe işıq qutusuna baxmaq üçün şəkillərə klikləyin.
Yüksək Elastik
Fərdi Üslublar yaradın
Əgər CSS ilə tanışsınızsa, qalereya elementlərini istədiyiniz şəkildə tərtib edə bilərsiniz.
Göstərilən nümunənin CSS:
/* 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;
}İstənilən HTML istifadə edin
Demək olar ki, hər hansı bir HTML istifadə edə bilərsiniz. Yalnız çox az məhdudiyyətlər var. Burada göstərilən nümunələrin hər ikisi eyni vizual nəticəni verir.
Misal 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>Misal 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ı Xüsusiyyətlər
Lazy Loading
Baxılan şəkilləri daha sürətli yükləyir
Bu, yalnız görünən sahəyə yaxın olan şəkilləri yükləyir. Beləliklə, görünən şəkillər üçün daha çox bant genişliyi.
API
Daha çox şey etməyə imkan verir
Bu, proqramlı şəkildə şəkilləri əlavə etməyə və silməyə, seçimləri dəyişdirməyə və ya hadisələrə reaksiya verməyə imkan verir.
Genişləndiricilər
Sizə fərdi ssenarilər üçün həllər təqdim edir
Bu, zaman keçdikcə böyüyən və Gridzy.Gallery asanlıqla genişləndirmək üçün faydalı kod parçaları ehtiva edən blog məqalələri toplusudur.
İstifadəçi Kitabxana haqqında
Gəlin işə başlayaq!
Planları yoxlamaq üçün düyməni basın!