Gridzy.Gallery
JavaScript Library
traikefa an-tsary mahavariana indrindra hitako. Farany dia misy mahazo ny fomba hanaovana izany RARINY!
Milo Persic – mpampiasa ny tranomboky
Quick Insight
Video fampianarana 1 minitra
Ianaro ity ao anatin'ny iray minitra monja:
Fampiasana fototra
fanahafana
sivana
Bika Aman 'endrika
Caption Styles
Fomba fanipika efa voafaritra mialoha ho an'ny vahaolana haingana mora
Atsipazo ny sary raha te hahita ny fomba fanoratana voarindra. Milalao miaraka amin'ny bokotra sy mpanangona loko mba hanitsiana ny fomba naorina ao anatiny.
Tags & Sivana
Mba hampisehoana ny sarinao amin'ny fomba mirindra kokoa
Ny rafitra fanivanana naorina dia tena miovaova. Ny zava-misy fa ny CSS selectors dia ampiasaina amin'ny sivana dia tena manome fahafahana ny karazana sivana rehetra.
Tena mifanentana
Azo ampiasaina amin'ny boaty jiro maro
Ampifandraiso amin'ny boaty jiro rehetra ny galeria. Ny mety ho mifanaraka dia efa ho 100%. Tsindrio ny sary raha te hahita ny PhotoSwipe lightbox ho ohatra.
Misy lahatsoratra bilaogy misy sombin-kaody efa vita:
Tena Flexible
Mamorona fomba mahazatra
Raha zatra amin'ny CSS ianao dia azonao atao ny mamolavola ny singa ao amin'ny galeria amin'ny fomba tianao.
CSS amin'ny ohatra aseho:
/* 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;
}Mampiasà HTML rehetra
Afaka mampiasa saika HTML rehetra ianao. Vitsy ihany ny fameperana. Ireo ohatra aseho eto dia samy mamokatra vokatra hita maso mitovy.
Ohatra 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>Ohatra 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>Endri-javatra mahasoa kokoa
Lazy Loading
Mampiditra haingana kokoa ny sary hitanao
Ireo sary izay manakaiky ny faritra hita maso ihany no mitondra izany. Noho izany, bandwidth bebe kokoa ho an'ny sary hita maso.
API
Mamela anao hanao bebe kokoa
Izany dia ahafahanao manampy sy manala sary amin'ny alàlan'ny programa, manova safidy na mihetsika amin'ny hetsika.
fanitarana
Manome anao vahaolana ho an'ny sehatra tsirairay
Izy io dia fitambarana lahatsoratra bilaogy izay mitombo rehefa mandeha ny fotoana ary misy sombin-kaody mahasoa mba hanitarana mora foana Gridzy.Gallery .
Mpampiasa Momba ny Tranomboky
Andao hidina amin'ny raharaham-barotra!
Tsindrio ny bokotra hijerena ireo drafitra!