Gridzy.Gallery
Defterdu JavaSkript
Ko ɓuri haawnaade e fotooji ɗi njiy-mi. Finnde mum won faamɗo no ɗum waɗirtee HAKKILLE!
Milo Persik – kuutortooɗo defterdu nduu
Faamde Jaawnde
Jaŋde wideyoo minit gooto
Janngu ɗum e nder hojomaaji seeɗa tan:
Kuutoragol teskinngol
Konfiguraasiyoŋ
Fiiltirɗe
Wonde
Sifaaaji Caption
Paɗe caption cifaaɗe ko adii ngam kuule jaawɗe koyɗe
Hoɗdu natal ngal ngam yiyde mbaadi binndi kuutorteeɗi ɗii. Fijo e butoŋuuji e cuɓorɗe kala ngam yuɓɓinde mbaydi mahndi hollirteendi.
Taguuji e Fiiltirɗe
Ngam hollirde natal maa e mbaadi ɓurndi yuɓɓude
Siistem filtirde mahaaɗo oo ina ɓuuɓi no feewi. Ko cuɓorɗe CSS kuutortee ngam filtoraade ina addana tigi rigi fotde kala sifaa filtoraade.
Ko nanndi heen no feewi
Huutorteeɗo E Kaɓirɗe Annoore Keewɗe
Hawru galle oo e kala lightbox. Ko waawi heen wonde fof, ko ina wona 100%. Ɓoɗɗu natal ngal ngam yiyde lampa PhotoSwipe hono yeru.
Flexible no feewi
Sosde Styles keeriiɗo
So aɗa anndi CSS, aɗa waawi stylede geɗe galle ɗee no njiɗir-ɗaa nii.
CSS ko yeru holliraaɗo:
/* 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;
}Huutoro kala HTML
Aɗa waawi huutoraade ko famɗi fof HTML. Ko keeri seeɗa tan ngoni heen. Yeruuji kolliraaɗi ɗoo ɗii fof ina ngadda njeñtudi yiytere wootere.
Yeru 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>Yeru 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>Feere ɓurnde nafoore
Lowre Lazy
Ina yaawi loowde natal maa yiytaa
Ɗuum ina loowa tan ko nataluuji ɓadtiiɗi nokku yiyteteeɗo oo. So bandwidth ɓeydiima ngam natal yiyteteengal.
API
Ina addana on waɗde ko ɓuri ɗum
Ɗuum ena addana-on ɓeydude e ittude natal e nder porogaraam, waylude cuɓe walla jaabaade kewuuji.
Yaajde
Ina rokka on peeje ngam senaareeji gooto gooto
Ko mooɓondiral binndanɗe blog mawɗe e nder sahaaji, tawa ina waɗi nate kodde ballooje ngam yaajnude Gridzy.Gallery .
Huutortooɗo Ko fayti e Defterdu
Njippoɗen e golle!
Ɓoɗɗu butoŋ oo ngam ƴeewde peeje ɗee!