Gridzy.Gallery
JavaScript библиотека
Најневеројатно фото искуство што сум го нашол. Конечно некој разбира како се прави ова ПРАВИЛНО!
Мило Першиќ – корисник на библиотеката
Брз увид
Видео туторијал од 1 минута
Научете го ова за само една минута:
Основна употреба
Конфигурација
Филтри
Изглед
Стилови на титлови
Предефинирани стилови на титлови за лесни брзи решенија
Поставете ги сликите за да го видите конфигурираниот стил на титлови. Играјте со копчињата и избирачите на бои за да го конфигурирате прикажаниот вграден стил.
Ознаки и филтри
За да ги прикажете вашите слики на поструктуриран начин
Вградениот систем за филтри е исклучително флексибилен. Фактот што CSS селектори се користат за филтрирање всушност овозможува речиси секаков вид филтер.
Високо компатибилен
Може да се користи со многу лајтбокс
Комбинирајте ја галеријата со која било лајтбокс. Веројатноста дека е компатибилен е речиси 100%. Кликнете на сликите за да го видите светлото поле PhotoSwipe како пример.
Постојат блог статии со готови фрагменти од код:
Високо флексибилен
Креирајте прилагодени стилови
Ако сте запознаени со CSS, можете да ги стилизирате ставките од галеријата како што сакате.
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;
}Користете кој било HTML
Можете да користите речиси секој HTML. Има само многу малку ограничувања. Примерите прикажани овде и двата даваат ист визуелен резултат.
Пример 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>Пример 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>Повеќе корисни карактеристики
Мрзливо се вчитува
Побрзо ги вчитува вашите прегледани слики
Ова ги вчитува само оние слики што се блиску до видливата област. Значи повеќе пропусен опсег за видливи слики.
API
Ви овозможува да направите многу повеќе
Ова ви овозможува да додавате и отстранувате слики програмски, да менувате опции или да реагирате на настани.
Екстензии
Ви дава решенија за поединечни сценарија
Тоа е збирка на блог статии кои растат со текот на времето и содржат корисни фрагменти од код за лесно проширување на Gridzy.Gallery .
Корисник за библиотеката
Ајде да се фаќаме за работа!
Кликнете на копчето за да ги проверите плановите!