Gridzy.Gallery
JavaScript Library
Pinakamakatilingala nga eksperyensya sa litrato nga akon nakit-an. Sa katapusan may isa nga nakahangop kon paano ini himuon sing HUSTISYA!
Milo Persic – isa ka user sang library
Madasig nga Paghangop
1 minutos nga video tutorial
Hibalua ini sa isa lang ka minuto:
Panguna nga paggamit
Pag-configure
Mga Filter
Makita sa hitsura
Mga Estilo sang Kapsyon
Natalana na nga mga estilo sang kapsyon para sa mahapos kag madasig nga mga solusyon
I-hover ang mga laragway para makita ang gin-configure nga estilo sang kapsyon. Maghampang gamit ang mga buton kag mga manugpili sang kolor sa pag-configure sang ginapakita nga built-in nga estilo.
Mga Tag kag mga Filter
Para mapakita ang imo mga laragway sa mas istrukturado nga paagi
Ang built-in nga sistema sang pagsala tuman ka flexible. Ang kamatuoran nga ang mga CSS selector ginagamit para sa pagsala nagapahanugot sang halos bisan ano nga sahi sang pagsala.
Kaangay gid
Magamit sa Madamo nga mga Lightbox
Isagol ang galeriya sa bisan unsang lightbox. Ang posibilidad nga ini nagakaigo halos 100%. I-klik ang mga laragway agud makita ang PhotoSwipe lightbox bilang halimbawa.
May mga artikulo sa blog nga may mga handa na nga mga snippet sang kodigo:
Flexible gid
Maghimo sang Custom nga mga Estilo
Kon pamilyar ka sa CSS, mahimo mo i-style ang mga butang sa gallery sa paagi nga gusto mo.
CSS sang ginapakita nga halimbawa:
/* 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 ang bisan ano nga HTML
Mahimo ka maggamit sang halos bisan ano nga HTML. Diutay lang ang mga pagdumili. Ang mga halimbawa nga ginapakita diri pareho nga nagapatubas sang pareho nga biswal nga resulta.
Halimbawa 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>Halimbawa 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>Dugang pa nga mapuslanon nga mga bahin
Matamad nga Pag-load
Mas madasig nga gina-load ang imo gintan-aw nga mga laragway
Gina-load lang sini ang mga laragway nga malapit sa makita nga lugar. Gani mas madamo nga bandwidth para sa makita nga mga laragway.
API
Nagatugot sa imo nga maghimo sing madamo pa
Ginatugutan ka sini nga magdugang kag magkuha sang mga laragway sing programatiko, magbag-o sang mga kapilian ukon maghulag sa mga hitabo.
Mga Extension
Nagahatag sa imo sang mga solusyon para sa indibidwal nga mga senaryo
Isa ini ka koleksyon sang mga artikulo sa blog nga nagatubo sa pagligad sang panahon kag nagaunod sang makabulig nga mga snippet sang kodigo agud mahapos nga mapalawig Gridzy.Gallery .
Gumagamit Parte sa Librarya
Mag-umpisa na kita sa negosyo!
I-klik ang buton para makita ang mga plano!