Gridzy.Gallery
Librarya han JavaScript
Pinaka-urusahon nga eksperyensya han litrato nga akon hin-agian. Ha katapusan mayda nakakasabot kun paano ini bubuhaton hin TAMA!
Milo Persic – usa nga gumaramit han librarya
Madagmit nga Pagsabot
1 ka minuto nga pagtutdo ha video
Hibaroi ini ha sulod la hin usa ka minuto:
Batakan nga paggamit
Pag-andam
Mga pagsala
Hitsura
Mga Estilo han Kapsyon
Mga estilo nga daan nga kapsyon para hin masayon nga madagmit nga mga solusyon
I-hover an mga ladawan basi makita an gin-andam nga estilo han kapsyon. Pagmulay han mga buton ngan mga parapili hin kolor ha pag-configure han iginpapakita nga estilo nga nakasulod.
Mga Tag & Mga Pagsala
Para maipakita an imo mga ladawan ha mas istrakturado nga paagi .
An nakasulod nga sistema han pagsala sobra ka-mabag-o-bag-o. An kamatuoran nga an mga parapili han CSS ginagamit para han pagsala aktuwal nga nagpapahinabo hin haros bisan ano nga klase hin pagsala.
Hataas nga Nahiuyon
Magamit ha Damo nga Kahon han Suga .
Pag-usahon an galeriya ha bisan ano nga kahon han suga. An posibilidad nga ini in magkatugbang in haros 100%. I-klik an mga ladawan para makita an PhotoSwipe nga lightbox komo pananglitan.
Mayda mga artikulo ha blog nga mayda andam nga mga gutiay nga kodigo:
Mabag-o-bag-o gud
Paghimo hin Pasadya nga mga Estilo
Kun pamilyar ka ha CSS, pwede mo ig-istilo an mga butang han galeriya ha paagi nga imo karuyag.
CSS han iginpakita nga ehemplo:
/* 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;
}Gamita an bisan ano nga HTML .
Pwede ka gumamit hin haros bisan ano nga HTML. Gutiay la gud an mga pagdiri. An mga ehemplo nga iginpapakita dinhi pariho naghahatag hin pariho nga biswal nga resulta.
Pananglitan 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>Pananglitan 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>Mas Mapulsanon nga mga Tampok .
Tamad nga Pagkarga
Mas malaksi nga nagkakarga han imo ginkita nga mga ladawan
Ginkakarga la hini adton mga ladawan nga hirani ha nakikita nga lugar. Salit mas damo nga bandwidth para han mga nakikita nga mga ladawan.
API
Nagtutugot ha imo nga magbuhat hin damu pa .
Nagtutugot ini ha imo nga magdugang ngan magkuha hin mga ladawan pinaagi hin programa, magbag-o hin mga opsyon o mag-react ha mga panhitabo.
Mga pagpahilawig
Naghahatag ha imo hin mga solusyon para ha tagsa-tagsa nga mga senaryo .
Usa ini nga koleksyon hin mga artikulo ha blog nga nagtutubo ha paglabay han panahon ngan mayda mga makakabulig nga mga gutiay nga kodigo para madali nga Gridzy.Gallery .
Gumagamit Mahitungod han Librarya .
Magtikang kita ha negosyo!
I-klik an buton para makita an mga plano!