Gridzy.Gallery
Laburaren JavaScript
Mafi kyawun gogewar hoto da na samu. A ƙarshe wani ya fahimci yadda ake yin wannan DAMA!
Milo Persic – mai amfani da ɗakin karatu
Hankali mai sauri
Koyarwar bidiyo na minti 1
Koyi wannan a cikin minti guda:
Asalin amfani
Kanfigareshan
Tace
Bayyanar
Rubutun Salon
Salon taken da aka riga aka ƙayyade don mafita mai sauƙi cikin sauri
Tsaya hotuna don ganin salon taken da aka tsara. Yi wasa tare da maɓalli da masu zaɓe masu launi don saita fasalin ginanniyar da aka nuna.
Tags & Filters
Don nuna hotunan ku a cikin ingantaccen tsari
Ginin tsarin tacewa yana da sassauƙa sosai. Kasancewar ana amfani da masu zaɓin CSS don tacewa a zahiri yana ba da damar kusan kowane nau'in tacewa.
Matukar Jituwa sosai
Mai Amfani Tare da Akwatunan Haske da yawa
Haɗa gallery tare da kowane akwatin haske. Yiwuwar cewa ya dace da kusan 100%. Danna hotunan don ganin akwatin haske na PhotoSwipe a matsayin misali.
Akwai labaran bulogi tare da shirye-shiryen code snippets:
Sauƙaƙe sosai
Ƙirƙiri Salon Al'ada
Idan kun saba da CSS, zaku iya tsara abubuwan gallery yadda kuke so.
Misali na CSS:
/* 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;
}Yi amfani da kowane HTML
Kuna iya amfani da kusan kowane HTML. Akwai 'yan ƙuntatawa kaɗan kawai. Misalan da aka nuna a nan duka suna samar da sakamakon gani iri ɗaya.
Misali 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>Misali 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>Ƙarin Abubuwan Fa'idodi
Lazy Loading
Load da hotunan ku da aka gani da sauri
Wannan yana ɗaukar hotuna kawai waɗanda ke kusa da wurin da ake gani. Don haka ƙarin bandwidth don bayyane hotuna.
API
Yana ba ku damar yin abubuwa da yawa
Wannan yana ba ku damar ƙarawa da cire hotuna ta hanyar tsari, canza zaɓuɓɓuka ko amsa abubuwan da suka faru.
kari
Yana ba ku mafita don kowane yanayi
Tarin labaran bulogi ne wanda ke girma akan lokaci kuma yana ƙunshe da snippets na lambar taimako don ƙarawa cikin sauƙi Gridzy.Gallery .
Mai amfani Game da Laburare
Mu sauka kan kasuwanci!
Danna maɓallin don duba tsare-tsaren!