Gridzy.Gallery
Ilayibhrari ye-JavaScript
Isipiliyoni esihle khulu seenthombe engisitholileko. Ekugcineni umuntu uyazwisisa bona kwenziwa njani lokhu KULUNGILE!
U-Milo Persic – umsebenzisi welayibhrari
Ukuzwisisa okurhabako
1 umzuzu wevidiyo yokufundisa
Funda lokhu ngomzuzu nje:
Ukusetjenziswa okusisekelo
Ukuhlelwa
Iinhlungi
Ukuvela
Iintayela zeenhloko
Iintayela zamagama ezihlathululwe ngaphambilini zezisombululo ezilula ezirhabako
Hambisa iinthombe ukuze ubone isitayela sesihloko esihleliweko. Dlala ngamabhathini kanye nabakhethi bemibala ukuhlela isitayela esakhelwe ngaphakathi.
Amathegi namasefo
Ukutjengisa iinthombe zakho ngendlela ehlelekileko
Irherho lokuhlunga elakhelwe ngaphakathi liguquguquka khulu. Iqiniso lokuthi iinkhethi ze-CSS zisetjenziselwa ukuhlunga kwenza bona kube nanyana ngiliphi ihlobo lokuhlunga.
Ikhambelana khulu
Isetjenziswa ngamabhokisi amanengi wokukhanyisa
Hlanganisa igalari nanyana ngiliphi ibhokisi lokukhanya. Amathuba wokuthi iyahambisana pheze ayi-100%. Tlika iinthombe ukubona ibhokisi lokukhanya le-PhotoSwipe njengesibonelo.
Kunama-atikili webhulogi aneengqetjhana zekhodi ezilungiselelwe:
Ukutjhuguluka khulu
Yenza iintayela ezikhethekileko
Nawujayele i-CSS, ungazitayela izinto zegalari ngendlela oyifunako.
I-CSS yesibonelo esitjengisiweko:
/* 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;
}Sebenzisa nanyana ngiyiphi i-HTML
Ungasebenzisa nanyana ngiyiphi i-HTML. Zimbalwa khulu iinqabo. Iimbonelo ezitjengiswe lapha zombili zikhiqiza umphumela ofanako obonakalako.
Isibonelo 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>Isibonelo 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>Ezinye iimpawu eziwusizo
Ukulayisha okuvilaphako
Ilayisha iinthombe zakho ezibukeleko msinyana
Lokhu kulayisha kwaphela lezo zithombe eziseduze nendawo ebonakalako. Ngalokho ububanzi obunengi bemifanekiso ebonakalako.
I-API
Ikuvumela bona wenze okunengi
Lokhu kukuvumela bona ungeze begodu ususe iinthombe ngendlela ehlelekileko, utjhugulule iinkhetho nofana usabele ezehlakalweni.
Iinngezelelo
Ikunikela ngeensombululo zezimo ngazinye
Yiqoqo lama-atikili webhulogi akhula ngokukhamba kwesikhathi begodu aneengcezu zekhodi ezisizako ukunweba lula Gridzy.Gallery .
Umsebenzisi Malungana neLayibrari
Asithome emsebenzini!
Tlika ibhathini ukuhlola amahlelo!