Gridzy.Gallery
JavaScript Library
Pinakamakangangalas na eksperyensya sa pagretrato na nakua ko. Sa katapustapusi igwa nang nakakasabot kun pano ini gigibohon nin TAMA!
Milo Persic – sarong paragamit kan libreriya
Marikas na Pananaw
1 minutong video tutorial
Aramon ini sa laog sana nin sarong minuto:
Pundamental na paggamit
Pagsasaayos
Mga Filter
Itsura
Mga Estilo nin Kapsyon
Mga estilo nin kapsyon na nakatalaan na para sa madaling marikas na solusyon
I-hover an mga imahe tanganing mahiling an naka-configure na estilo nin kapsyon. Mag-aling sa mga buton asin mga parapili nin kolor tanganing i-configure an ipinapahiling na built-in na estilo.
Mga Tag asin Filter
Tanganing maipahiling an saimong mga imahe sa mas estrukturadong paagi
An nakabugtak na sistema nin pagsara labi-labi ka-flexible. An bagay na an mga parapili nin CSS ginagamit para sa pagsala talagang nagpapangyari nin haros gabos na klase nin pagsara.
Halangkaw na Katugma
Magagamit sa Dakul na mga Lightbox
Isalak an galeriya sa arin man na lightbox. An posibilidad na ini magkakasundo haros 100%. I-click an mga imahe tanganing mahiling an PhotoSwipe lightbox bilang sarong halimbawa.
Igwa nin mga artikulo sa blog na may mga andam nang mga snippet nin kodigo:
Flexible na gayo
Magmukna nin mga Pasadyang Estilo
Kun pamilyar ka sa CSS, puede mong istilohon an mga bagay sa galeriya sa paaging gusto mo.
CSS kan ipinapahiling na 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;
}Gamiton an arin man na HTML
Pwede kang maggamit nin haros arin man na HTML. Dikit sana an mga restriksyon. An mga halimbawang ipinapahiling digdi parehong nagbubunga nin parehong biswal na 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>Mas Kapakipakinabang na mga Tampok
Tamad na Pagkarga
Mas marikas an pagkarga kan saimong mga nahiling na imahe
Ini nagkakarga sana kan mga imahe na harani sa nahihiling na lugar. Kaya mas dakol na bandwidth para sa mga nahihiling na imahe.
API
Nagtutugot saimo na gumibo nin orog pa
Ini nagtutugot saimo na magdagdag asin maghale nin mga imahe sa paagi nin programa, magbago nin mga opsyon o magreak sa mga pangyayari.
Mga Ekstensyon
Nagtatao saimo nin mga solusyon para sa mga indibidwal na senaryo
Ini sarong koleksyon nin mga artikulo sa blog na nagdadakula sa lawig nin panahon asin igwa nin mga nakakatabang na mga pidaso nin kodigo tanganing madaling mapalawig Gridzy.Gallery .
Paragamit Manungod sa Libreriya
Magpoon na kita sa negosyo!
I-click an buton tanganing hilingon an mga plano!