Gridzy.Gallery
Bibliothèque ti JavaScript
Akota ye ti dongo bê ti foto so mbi wara. Na nda ni mbeni zo ahinga tongana nyen ti sala ye so DROIT!
Milo Persic – mbeni zo ti kua ti bibliothèque .
Hio ti hinga ye
Vidéo ti penze-ngbonga 1
Manda ye so gi na yâ ti mbeni penze-ngbonga:
Kozo kusala
Lege ti lekengo ye
Afiltre
Lo kpa ye
Astyle ti sous-titre
A leke astyle ti atënë ti yâ ti mbeti ni kozo awe ti tene a leke ni hio hio
Zia maboko ti mo na ndo ti image ni ti bâ style ti caption so a configuré ni. Joué na a-bouton nga na a-appareil ti sorongo couleur ti leke na style so a fa ni.
A-étiquette na a-filtre
Ti fa a-image ti mo na mbeni lege so a leke ni nzoni .
A leke yâ ti système ti filtre ni nzoni mingi. So a yeke sara kua na a-appareil ti CSS ti sara na filtre, a yeke sara biani si a lingbi ti sara kua na mara ti filtre kue.
Ga na lege ni
A lingbi ti sara kua na a-Lightbox mingi .
Bungbi galerie ni na boîte ti lumière kue. Probabilité so lo yeke na ni ayeke ndulu na 100%. Zia a-image ni ti bâ boîte ti lumière ti PhotoSwipe tongana tapande.
A yeke wara a-article ti blog so ayeke na akete kode so a leke ni awe:
Ga na flexible
Sara ambeni style ti mo wani
Tongana mo hinga CSS nzoni, mo lingbi ti sara style ti aye ti galerie ni na lege so mo ye.
CSS ti tapande so a fa:
/* 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;
}Lo yeke na HTML kue .
Lo lingbi ti sara kua na HTML kue. A yeke gi kete wungo ti akangango lege. Atapande so a fa ge use kue ayeke ga na oko ye ti bango ni.
Tapande 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>Tapande 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>Ambeni ye so ayeke mû maboko mingi
Chargement ti paresseux
A yeke charge a-image so mo bâ ni hio .
Ye so ayeke zia gi a-image so ayeke nduru na ndo so zo alingbi ti bâ ni. Tongaso, a yeke wara gbâ ti a-image so zo alingbi ti bâ ni.
API
A mû lege na mo ti sara ambeni ye mingi .
Ye so amû lege na mo ti zia na ndo ni na ti zi ambeni image na lege ti programme, ti changé a-option wala ti sara ye alingbi na aye so asi.
A-extension
A mû na mo alege ti leke na akpale oko oko .
A yeke mbeni bungbi ti a-article ti blog so ayeke kono na yâ ti angoi nde nde nga so ayeke na ambeni kete kode so ayeke mû maboko ti tene a sara kua na Gridzy.Gallery hio.
Use ti bibliothèque ni .
Zia e lï na yâ ti kua ni!
Zia bouton ni ti bâ aplan ni!