Gridzy.Gallery
ЈаваСцрипт библиотека
Најневероватније фото искуство које сам пронашао. Коначно неко разуме како се то ради ПРАВО!
Мило Першић – корисник библиотеке
Куицк Инсигхт
Видео туторијал од 1 минута
Научите ово за само минут:
Основна употреба
Конфигурација
Филтери
Изглед
Стилови натписа
Унапред дефинисани стилови натписа за лака брза решења
Пређите курсором преко слика да бисте видели конфигурисани стил натписа. Играјте се дугмадима и бирачима боја да бисте конфигурисали приказани уграђени стил.
Ознаке и филтери
Да прикажете своје слике на структуриранији начин
Уграђени систем филтера је изузетно флексибилан. Чињеница да се ЦСС селектори користе за филтрирање заправо омогућава скоро сваки тип филтера.
Високо компатибилан
Употребљиво са много светлих кутија
Комбинујте галерију са било којим оквиром за преглед. Вероватноћа да је компатибилан је скоро 100%. Кликните на слике да бисте видели ПхотоСвипе оквир за преглед као пример.
Постоје чланци на блогу са готовим исечцима кода:
Веома флексибилан
Креирајте прилагођене стилове
Ако сте упознати са ЦСС-ом, можете да стилизујете ставке галерије онако како желите.
ЦСС приказаног примера:
/* 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;
}Користите било који ХТМЛ
Можете користити скоро сваки ХТМЛ. Постоји само неколико ограничења. Овде приказани примери дају исти визуелни резултат.
Пример 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>Више корисних функција
Лази Лоадинг
Брже учитава ваше прегледане слике
Ово учитава само оне слике које су близу видљиве области. Дакле, више пропусног опсега за видљиве слике.
АПИ
Омогућава вам да урадите много више
Ово вам омогућава да програмски додајете и уклањате слике, мењате опције или реагујете на догађаје.
Екстензије
Пружа вам решења за појединачне сценарије
То је колекција чланака на блогу који временом расту и садрже корисне исечке кода за једноставно проширење Gridzy.Gallery .
Корисник О библиотеци
Хајдемо на посао!
Кликните на дугме да проверите планове!