Gridzy.Gallery
Valenivolavola ni JavaScript
Veivakurabuitaki duadua na itaba au sa kunea. Kena itinitini e dua e kila na sala me caka kina oqo DODONU!
Milo Persic – e dua na vakayagataki ni valenivolavola .
Vakasama totolo
1 na miniti ni vidio ni veituberi
Vulica oqo ena dua ga na miniti:
Vakayagataki taumada
Veivakarautaki
Veisau
Irairai
iVakarau ni iTukutuku
Na iwalewale ni itukutuku sa vakamacalataki oti me baleta na iwali totolo rawarawa
Hover na iyaloyalo me raica na ivakarau ni itukutuku vakarautaki. Qito vata kei na ibulukau kei na roka pickers me vakarautaka na ivakarau ni tara-ena vakaraitaki.
Tagi kei na veivakasavasavataki
Me vakaraitaki na nomu iyaloyalo ena dua na sala vakarautaki vakavinaka cake .
Na ivakarau ni filter ni tara-ena sa rui veisautaki. Na dina ni CSS digitaki era vakayagataki me baleta na vakasavasavataki dina e rawa kina voleka ni dua na mataqali vakasavasavataki.
Veiganiti Cecere
Vakayagataki ena vuqa na kato ni rarama
Vakaduavatataka na galeri kei na dua na kato ni rarama. Na kena rawa ni veiganiti e voleka ni 100%. Kiliki ena iyaloyalo mo raica kina na PhotoSwipe lightbox me vaka e dua na ivakaraitaki.
E tiko na itukutuku ni blog kei na veitiki ni code sa vakarautaki tu:
Veisau sara
Cakava na ivakarau vakaitaukei
Kevaka o kila vinaka na CSS, e rawa ni o vakarautaka na iyaya ni galeri ena sala o vinakata.
CSS ni ivakaraitaki vakaraitaki:
/* 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;
}Vakayagataka e dua na HTML
E rawa ni o vakayagataka voleka ni dua na HTML. E lailai sara ga na veivakatabui. Na ivakaraitaki e vakaraitaki eke e rau vakavuna ruarua na vua ni rai vata ga.
ivakaraitaki 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>ivakaraitaki 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>Na veika e yaga tale eso
Vakavodoki vakawelewele
Totolo cake na nomu vakavodoki na iyaloyalo o raica
Oqo e vakavodoki ga kina na iyaloyalo e volekata na vanua e laurai. Sa levu cake kina na bandwidth me baleta na iyaloyalo e laurai.
API
E vakatara vei iko mo cakava e levu tale na ka
Oqo e rawa kina vei iko mo vakacuruma ka kauta laivi na iyaloyalo ena parokaramu, veisautaka na digidigi se vakayacora na veika e yaco.
Vakabalavutaki
Vakarautaka vei iko na iwali ni ituvaki yadua .
E dua na isoqoni ni itukutuku ni blog ka tubu ena veigauna ka tiko kina na veitiki ni code veivuke me rawarawa na kena vakabalavutaki Gridzy.Gallery .
Vakayagataki Me baleta na Vale ni Vola
Me da sa sobu ki na bisinisi!
Kiliki ena ibulukau mo raica na ituvatuva!