Gridzy.Gallery
Leighlann JavaScript
Yn 'earroo photo' s'immeeaght ta mee er gheddyn. Finally ta dooinney tushtey cre'n aght t'eh ry-yannoo RIGHT!
Milo Persic – ymmydeyr jeh’n leibrey
Soilshey sniessey
Tutorial video 1 minnid
Immeeaght er shoh ayns un minnid:
Cleaysh bunneydagh
Reihys
Screeuyn
Caslys
Stylyn screeuyn
Stiyl caption er ny mharkey ro-laue son fud-halloonyn sheean as sheean
Hover ny skeealyn dy akin y style caption ry-hoi. Cleaysh rish ny botanyn as ny pickeryn color dy rheynn y style built-in taishbynit.
Taggyrtyn as Screeuyn
Son soilshaghey dty skeealyn ayns aght smoo strughtooragh
Ta'n system filter ry-hoi ry-hoi. Ta'n aght dy vel selectoryn CSS ry-chleaysh son filtering ry-chleaysh ry-chleaysh ry-chleaysh ry-chleaysh.
Ard-choardail
Cleayney lesh ymmodee bocsanyn soilshey
Cooish y galley rish lightbox erbee. Ta'n probability dy vel eh co-chrauee 100%. Click er ny skeealyn dy akin y box-soilshey PhotoSwipe myr sampleyr.
Ta artyraghyn blog lesh snippetyn code ready-made:
Ard-fleximal
Cree Stileyn Custom
Marish CSS, t'ou uss stylish ny reddyn 'sy gallery myr t'ou uss.
CSS jeh'n eie er ny hoilshaghey:
/* 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;
}Cleays HTML erbee
Ta'n HTML ry-chlashtyn. Ta reddyn ry-yannoo ry-hoi. Ta ny sampleyryn taishbynit ec y traa t'ayn cur magh yr un torçh s'goan.
Sheeal 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>Sheeal 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>Features ny s'feer
Loading Lazy
Load ny skeeallyn ta shiu er nyn shilley ny s'faggys da
Ta'n red shoh loadaghey ny skeeallyn shen ny lomarcan ta ry-akin rish y rannagh feer-feeu. So bandwidth ny smoo son skeealyn feer-feeu.
API
Cur lhiat dy yannoo mooarane smoo
Ta shoh cowraghey dy chur rish as dy chur magh ymmydyn programmagh, dy chaghlaa roghanyn ny dy react rish ymmyd.
Leshtyn
T'eh cur freggyrtyn dhyt son scenarioyn ry-cheilley
Ta'n 'co-chruinnaghey' jeh artyraghyn blog ta crooit rish traa as ta snippetyn code ymmydoil ayn dy 'leah' Gridzy.Gallery .
User Mychione y Leibrey
Lhig dooin goll sheese gys obbyr!
Click er y botoon dy row ny plannyn!