Gridzy.Gallery
Laipeli JavaScript
Ko e aʻusia fakaofo taha ʻo e ʻata kuó u maʻú. Faka'osi 'oku mahino ki ha taha 'a e founga ke fai 'aki 'eni 'a e TOTONU!
Milo Persic – ko ha tokotaha ngāue‘aki ‘o e laipeli .
Fakakaukau vave
Ako vitio miniti 'e 1
Ako ʻeni ʻi ha miniti pē ʻe taha:
Tefito'i ngaue'aki
Fakalelei'i
Ngaahi filita
Fōtunga
Ngaahi Sitaila Fakamatala
Ngaahi sitaila fakamatala kuo 'osi fakapapau'i ki ha ngaahi fakalelei'anga vave faingofua
Hover 'a e ngaahi 'ata ke sio ki he sitaila 'o e fakamatala kuo configured. Va'inga 'aki 'a e ngaahi buttons mo e ngaahi pickers lanu ke configure 'a e sitaila langa 'oku fakahaa'i.
Ngaahi Faka'ilonga & Ngaahi Sita
Ke fakahaa'i ho'o ngaahi 'ata 'i ha founga fokotu'utu'u lelei ange .
'Oku fu'u 'ata'ataa 'a e sisitemi filter langa-'i. Ko e mo'oni 'oku faka'aonga'i 'a e kau fili CSS ki he filtering 'oku ne faka'ata mo'oni 'a e meimei ha fa'ahinga filter.
Fe'unga Ma'olunga
Faka'aonga'i mo e ngaahi puha maama lahi
Fakataha'i 'a e fale faka'ali'ali mo ha fa'ahinga puha maama. Ko e malava ke fe'unga 'oku meimei 100%. Lomiʻi ʻi he ngaahi ʻata ke vakai ki he puha maama PhotoSwipe ko ha fakatātā.
'Oku 'i ai ha ngaahi fakamatala blog mo e ngaahi konga 'o e code kuo teuteu'i:
Fe'unu'aki Ma'olunga
Fa'u ha ngaahi sitaila angamaheni
Kapau 'oku ke maheni mo e CSS, 'e lava ke ke style 'a e ngaahi me'a 'o e fale faka'ali'ali 'i he founga 'oku ke loto ki ai.
CSS 'o e sipinga 'oku fakahaa'i:
/* 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;
}Ngāueʻaki ha faʻahinga HTML pē .
'E lava ke ke faka'aonga'i 'a e meimei ha HTML. ʻOku siʻisiʻi ʻaupito pē ʻa e ngaahi fakangatangatá. Ko e ngaahi fakatātā ‘oku fakahaa‘i hení ‘okú na fakatou ‘omai ‘a e ola faka‘ata tatau.
Fakatātā 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>Fakatātā 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>Ngaahi Meʻa ʻAonga Lahi Ange
Uta paie
Loads vave ange ho'o ngaahi 'ata 'oku sio ki ai
ʻOku uta ʻe he meʻá ni ʻa e ngaahi ʻata pē ʻoku ofi ki he feituʻu ʻoku hā maí. Ko ia 'oku lahi ange 'a e bandwidth ki he ngaahi 'ata 'oku 'asi.
API
Faka'ata koe ke ke fai ha me'a lahi ange .
'Oku faka'ata 'e he me'a ni ke ke tanaki atu mo to'o 'a e ngaahi 'ata programmatically, liliu 'a e ngaahi fili pe tali ki he ngaahi me'a 'oku hoko.
Ngaahi fakalahi
'Oku ne 'oatu kiate koe 'a e ngaahi fakalelei'anga ki he ngaahi tu'unga fakafo'ituitui .
Ko ha tanaki'anga ia 'o e ngaahi fakamatala blog 'oku tupulaki 'i he taimi pea 'oku 'i ai ha ngaahi konga 'o e code tokoni ke faingofua hono fakalahi Gridzy.Gallery .
Ko e tokotaha ngāueʻaki Fekauʻaki mo e Laipeli
Tau hifo ki he pisinisí!
Lomi'i 'a e button ke vakai'i 'a e ngaahi palani!