Gridzy.Gallery
Leabharlann airson javascript a
An eòlas dhealbhan as iongantach a lorg mi. Mu dheireadh tha cuideigin a 'tuigsinn mar a nì thu seo CEART!
Milo Persic - neach-cleachdaidh an leabharlainn
Lèirsinn sgiobalta
Video tutorial 1 mionaid
Ionnsaich seo ann an dìreach mionaid:
Cleachdadh bunaiteach
Rèiteachadh
Criathragan
Coltas
Stoidhlichean caption
Stoidhlichean caption ro-mhìnichte airson fuasglaidhean luath furasta
Gluais na h-ìomhaighean gus an stoidhle caption rèiteachaidh fhaicinn. Cluich leis na putanan agus luchd-togail dhathan gus an stoidhle togte a tha air a thaisbeanadh a rèiteachadh.
Tagaichean & sìoltachain
Gus na h-ìomhaighean agad a thaisbeanadh ann an dòigh nas structaraiche
Tha an siostam sìoltachain togte gu math sùbailte. Leis gu bheil luchd-taghaidh CSS air an cleachdadh airson sìoladh gu dearbh a ’comasachadh cha mhòr seòrsa sam bith de shìoltachain.
Àrd-fhreagarrach
Faodar a chleachdadh le mòran bhogsaichean solais
Cuir còmhla an gailearaidh le bogsa solais sam bith. Tha an coltachd gu bheil e co-chòrdail faisg air 100%. Cliog air na h-ìomhaighean gus am bogsa solais PhotoSwipe fhaicinn mar eisimpleir.
Tha artaigilean blog ann le criomagan còd deiseil:
Gu math sùbailte
Cruthaich Custom Styles
Ma tha thu eòlach air CSS, faodaidh tu na stuthan gailearaidh a stoidhle mar a tha thu ag iarraidh.
CSS den eisimpleir a chithear:
/* 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;
}Cleachd HTML sam bith
Faodaidh tu cha mhòr HTML sam bith a chleachdadh. Chan eil ach glè bheag de chuingealachaidhean ann. Bheir na h-eisimpleirean a chithear an seo an aon toradh lèirsinneach.
Eisimpleir 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>Eisimpleir 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>Feartan nas fheumaile
Leisg a’ luchdachadh
A’ luchdachadh na h-ìomhaighean a tha thu air fhaicinn nas luaithe
Cha luchdaich seo ach na h-ìomhaighean sin a tha faisg air an àite fhaicsinneach. Mar sin barrachd leud-bann airson ìomhaighean faicsinneach.
API
A’ leigeil leat tòrr a bharrachd a dhèanamh
Leigidh seo leat ìomhaighean a chur ris agus a thoirt air falbh gu prògramach, roghainnean atharrachadh no dèiligeadh ri tachartasan.
Leudachain
A’ toirt dhut fuasglaidhean airson suidheachaidhean fa leth
Is e cruinneachadh de artaigilean blog a th’ ann a bhios a’ fàs thar ùine agus anns a bheil criomagan còd feumail gus Gridzy.Gallery a leudachadh gu furasta.
Cleachdaiche Mu dheidhinn an Leabharlann
Rachamaid sìos gu gnìomhachas!
Cliog air a’ phutan gus sùil a thoirt air na planaichean!