Gridzy.Gallery
Laeborari ya JavaScript
Maitemogelo a a gakgamatsang thata a dinepe a ke a boneng. La bofelo mongwe o tlhaloganya gore o ka dira jang seno SIAME!
Milo Persic – modirisi wa laeborari
Temogo ka bonako
Thuto ya bidio ya motsotso o le 1
Ithute seno mo motsotsong fela:
Tiriso ya motheo
Thulaganyo
Ditlhotlhi
Tebego
Ditaele tsa Tlhaloso
Ditaele tsa tlhaloso tse di tlhalositsweng go sa le gale tsa ditharabololo tse di bonolo ka bonako
Sutisa ditshwantsho go bona setaele sa tlhaloso e e rulagantsweng. Tshameka ka dikonopo le ditlhophi tsa mmala go rulaganya setaele se se bontshitsweng se se ageletsweng.
Ditheke le Ditlhotlhi
Go bontsha ditshwantsho tsa gago ka tsela e e rulagantsweng sentle
The a haha-ka filthara tsamaiso ke feteletseng tenyetseha. Lebaka la gore ditlhophi tsa CSS di dirisediwa go sefa tota le kgontsha mo e ka nnang mofuta mongwe le mongwe wa setlhotlhi.
E Tshwaragana Thata
E ka Dirisiwa le Mabokoso a Lesedi a Mantsi
Kopanya gallery le lightbox efe kapa efe. Kgonagalo ya gore e tsamaisana e batla e le 100%. Tobetsa ditshwantsho go bona lebokoso la lesedi la PhotoSwipe jaaka sekai.
Go na le diathikele tsa blog tse di nang le ditsopolwa tsa khoutu tse di setseng di dirilwe:
Go Tenyetsega Thata
Tlhama Ditaele tse di itebagantseng
Fa o tlwaetse CSS, o ka dira setaele sa dilwana tsa galeri ka tsela e o e batlang.
CSS ya sekai se se bontshitsweng:
/* 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;
}Dirisa HTML nngwe le nngwe
O ka dirisa mo e ka nnang HTML nngwe le nngwe. Go na le dithibelo di le mmalwa fela. Dikai tse di bontshitsweng fano ka bobedi di ntsha dipholo tse di tshwanang tsa pono.
Sekao 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>Sekao 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>Dikarolo tse dingwe tse di mosola
Go Laisa ka Botshwakga
E laisa ditshwantsho tse o di lebileng ka bonako
Seno se laisa fela ditshwantsho tse di gaufi le lefelo le le bonalang. Ka jalo bophara jwa bente jo bontsi jwa ditshwantsho tse di bonalang.
API
E go letla go dira go le gontsi
Sena se o dumella ho eketsa le ho tlosa ditshwantsho ka lenaneo, ho fetola dikgetho kapa ho arabela diketsahalo.
Dikatoloso
E go tlamela ka ditharabololo tsa ditiragalo ka bongwe
Ke kokoanyo ya diathikele tsa blog tse di golang fa nako e ntse e tsamaya mme di na le dinopolo tsa khoutu tse di thusang go atolosa bonolo Gridzy.Gallery .
Modirisi Ka ga Laeborari
A re tsene mo tirong!
Tobetsa konopo go bona dithulaganyo!