Gridzy.Gallery
JavaScript-girjerádju
Buot imašlaš govvavásáhus maid lean gávdnan. Viimmat muhtin ádde mo dán galgá dahkat RIEKTA!
Milo Persic – girjerádjosa geavaheaddji
Jođánit áddejupmi
1 minuhta videooahpahus
Oahpa dán dušše minuhtas:
Vuođđogeavaheapmi
Konfigurašuvdna
Filterat
Bajiloaidnu
Teakstastiillat
Ovdal mearriduvvon teavsttaid stiillat álkes ja jođánit čovdosiid várás
Bija govaid čuoggáid vai oainnát konfigurerejuvvon teakstastiilla. Speallan nuppástusaid ja ivdneválljejeaddjiid bokte vai sáhtát konfigureret čájehuvvon sisačálihuvvon stiilla.
Mearkkat ja filterat
Vai čájehat iežat govaid eambbo strukturerejuvvon vuogi mielde
Sisáibmofiltervuogádat lea hui fleksibel. Dat ahte CSS-válljejeaddjit geavahuvvojit filtreremii, dahká duođaid vejolažžan measta juohke lágan filtera.
Hui soahpavaš
Geavahahtti máŋgga čuovgaboksain
Ovttastahttit galleriija vaikko makkár čuovgaboksain. Vejolašvuohta ahte dat lea soahpavaš lea measta 100%. Deaddilat govaid vai oainnát ovdamearkan PhotoSwipe-čuovgaboksa.
Gávdnojit bloggačállosat main leat gárvves kodabihtát:
Hui fleksibel
Luohte iešheanalaš stiillaid
Jus leat oahpásmuvvan CSS:ii, de sáhtát stiilet galleriijaávdnasiid nu mo háliidat.
CSS čájehuvvon ovdamearkkas:
/* 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;
}Geavat vaikko makkár HTML
Sáhtát geavahit measta juohke HTML. Leat dušše hui unnán ráddjehusat. Dás čájehuvvon ovdamearkkat addet guktot seamma visuála bohtosa.
Ovdamearka 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>Ovdamearka 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>Eanet ávkkálaš doaimmat
Lazy Loading
Lasta geahččan govaid jođáneappot
Dát bidjá dušše daid govaid mat leat lahka oidnosis guovllu. Nu ahte eanet báddeviidodat oidnosis govaide.
API
Láhčá dili nu ahte sáhtát bargat olu eanet
Dáinna sáhtát lasihit ja váldit eret govaid prográmmalaččat, rievdadit vejolašvuođaid dahje reageret dáhpáhussii.
Viiddideamit
Fállá dutnje čovdosiid sierra dilálašvuođaide
Dat lea čoakkáldat bloggačállosiin mat sturrot áiggi mielde ja mas leat ávkkálaš kodabihtát mat álkit viiddidit Gridzy.Gallery .
Geavaheaddji Girjerádjosa birra
Álggos álgit bargui!
Deaddilat čuoggá vai beasat geahččat plánaid!