Gridzy.Gallery
JavaScript китапханәсе
Мин тапкан иң гаҗәп фото тәҗрибәсе. Ниһаять, кемдер бу Хокукны ничек эшләргә икәнен аңлый!
Мило Персик - китапханә кулланучысы
Тиз аңлау
1 минутлык видео курс
Моны бер минут эчендә өйрәнегез:
Төп куллану
Конфигурация
Фильтрлар
Күренеш
Язу стиле
Easyиңел чишелешләр өчен алдан билгеләнгән язу стильләре
Конфигурацияләнгән язу стилен карау өчен рәсемнәрне өстәгез. Күрсәтелгән стильне конфигурацияләү өчен төймәләр һәм төс сайлаучылар белән уйнагыз.
Тэглар һәм Фильтрлар
Рәсемнәрегезне структуралаштырылган итеп күрсәтү өчен
Эчкән фильтр системасы бик сыгылучан. 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 киңәйтү өчен файдалы код сниппетлары булган блог мәкаләләре җыелмасы.
Китапханә турында кулланучы
Әйдәгез бизнеска төшик!
Планнарны тикшерү өчен төймәгә басыгыз!