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 оңай кеңейту үшін пайдалы код үзінділерін қамтитын блог мақалаларының жинағы.
Пайдаланушы Кітапхана туралы
Іске кірісейік!
Жоспарларды тексеру үшін түймені басыңыз!