Gridzy.Gallery
Китобхонаи JavaScript
Таҷрибаи аҷибтарин акси ман пайдо кардам. Ниҳоят, касе мефаҳмад, ки чӣ тавр ин корро ДУРУСТ кардан лозим аст!
Мило Персик - корбари китобхона
Фаҳмиши зуд
1 дақиқа видео дарс
Инро дар як дақиқа омӯзед:
Истифодаи асосӣ
Конфигуратсия
Филтрҳо
Намуди зоҳирӣ
Услубҳои сарлавҳа
Услубҳои қаблан муайяншудаи сарлавҳа барои ҳалли осони зуд
Барои дидани услуби конфигуратсияи сарлавҳа, ба тасвирҳо гузаред. Бо тугмаҳо ва интихобкунандагони ранг бозӣ кунед, то услуби дарунсохташударо танзим кунед.
Тегҳо ва Филтрҳо
Барои намоиш додани тасвирҳои худ ба таври сохторӣ
Системаи дарунсохт филтр хеле чандир аст. Далели он, ки селекторҳои CSS барои филтр истифода мешаванд, воқеан қариб ҳама намуди филтрҳоро имкон медиҳанд.
Мутобиқати баланд
Бо бисёр қуттиҳои Lightbox истифодашаванда
Галереяро бо ягон қуттии равшанӣ якҷоя кунед. Эҳтимолияти мувофиқ будани он қариб 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>Хусусиятҳои бештар муфид
Lazy Loading
Тасвирҳои дидашудаи шуморо тезтар бор мекунад
Ин танҳо он тасвирҳоеро, ки ба минтақаи намоён наздиканд, бор мекунад. Ҳамин тавр, фарохмаҷрои бештар барои тасвирҳои намоён.
API
Ба шумо имкон медиҳад, ки бештар кор кунед
Ин ба шумо имкон медиҳад, ки ба таври барномавӣ тасвирҳоро илова ва хориҷ кунед, имконотро тағир диҳед ё ба рӯйдодҳо вокуниш нишон диҳед.
Васеъшавӣ
Ба шумо барои сенарияҳои инфиродӣ ҳалли худро пешниҳод мекунад
Ин маҷмӯаи мақолаҳои блогест, ки бо мурури замон афзоиш меёбанд ва дорои порчаҳои коди муфид барои ба осонӣ васеъ кардани Gridzy.Gallery .
Истифодабаранда Дар бораи Китобхона
Биёед ба кор сар кунем!
Барои санҷидани нақшаҳо тугмаро пахш кунед!