Gridzy.Gallery
JavaScript Library
Chodabwitsa kwambiri chithunzi chomwe ndachipeza. Pomaliza wina amamvetsetsa momwe angachitire izi ZOYENERA!
Milo Persic - wogwiritsa ntchito laibulale
Quick Insight
1 mphindi kanema phunziro
Dziwani izi mu miniti yokha:
Kugwiritsa ntchito koyambira
Kusintha
Zosefera
Maonekedwe
Masitayilo Ofotokozera
Masitayilo ofotokozeratu kuti mupeze mayankho osavuta mwachangu
Yendetsani pamwamba pazithunzi kuti muwone kalembedwe ka mawu osinthidwa. Sewerani ndi mabatani ndi zosankha mitundu kuti musinthe mawonekedwe omangidwira.
Tags & Zosefera
Kuti muwonetse zithunzi zanu m'njira yokhazikika
Zosefera zomangidwa mkati zimasinthasintha kwambiri. Mfundo yakuti CSS selectors ntchito kusefa kwenikweni chimathandiza pafupifupi mtundu uliwonse wa fyuluta.
Zogwirizana Kwambiri
Imagwiritsidwa Ntchito Ndi Ma Lightbox Ambiri
Phatikizani nyumbayi ndi bokosi lowala lililonse. Kuthekera kogwirizana ndi pafupifupi 100%. Dinani zithunzi kuti muwone PhotoSwipe lightbox monga chitsanzo.
Pali zolemba zamabulogu zokhala ndi mawu osavuta opangidwa kale:
Kwambiri Flexible
Pangani Masitayilo Amakonda
Ngati mumadziwa CSS, mutha kusanja zinthu zamagalasi momwe mukufunira.
CSS yachitsanzo chowonetsedwa:
/* 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;
}Gwiritsani ntchito HTML iliyonse
Mutha kugwiritsa ntchito pafupifupi HTML iliyonse. Pali zoletsa zochepa kwambiri. Zitsanzo zomwe zikuwonetsedwa apa zonse zimatulutsa zotsatira zofanana.
Chitsanzo 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>Chitsanzo 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>Zambiri Zothandiza
Waulesi Loading
Imatsegula mwachangu zithunzi zomwe mwawona
Izi zimanyamula zithunzi zokhazo zomwe zili pafupi ndi malo owonekera. Momwemonso bandwidth pazithunzi zowoneka.
API
Zimakupatsani mwayi wochita zambiri
Izi zimakulolani kuti muwonjezere ndi kuchotsa zithunzi mwadongosolo, kusintha zosankha kapena kuchitapo kanthu pazochitika.
Zowonjezera
Imakupatsirani mayankho azinthu zosiyanasiyana
Ndizolemba zamabulogu zomwe zimakula pakapita nthawi ndipo zimakhala ndi mawu osavuta owonjezera Gridzy.Gallery .
Wogwiritsa Ntchito Za Library
Tiyeni tipite ku bizinesi!
Dinani batani kuti muwone mapulani!