Gridzy.Gallery
JavaScript Library
Boiphihlelo bo makatsang ka ho fetesisa boo ke bo fumaneng. Qetellong motho e mong o utloisisa mokhoa oa ho etsa sena ka NEPO!
Milo Persic - mosebelisi oa laeborari
Quick Insight
Thuto ea video ea metsotso e 1
Ithute sena ka motsotso feela:
Tšebeliso ea motheo
Tlhophiso
Lisefe
Ponahalo
Litaele tsa Tlhaloso
Litaele tse hlalositsoeng esale pele bakeng sa litharollo tse bonolo tsa kapele
Tsamaisa litšoantšo ho bona setaele se hlophisitsoeng sa mantsoe. Bapala ka likonopo le likhetho tsa mebala ho hlophisa setaele se hahelletsoeng kahare.
Li-tag le Lisefa
Ho hlahisa litšoantšo tsa hau ka mokhoa o hlophisitsoeng haholoanyane
Sistimi ea filthara e hahelletsoeng e fetoha habonolo haholo. Taba ea hore likhetho tsa CSS li sebelisetsoa ho sefa ha e le hantle e nolofalletsa mofuta ofe kapa ofe oa sefe.
E Tsamaellana Haholo
E ka Sebelisana le Li-Lightboxes tse ngata
Kopanya la gallery le lebokoso lefe kapa lefe la lebone. Monyetla oa hore e lumellane ke hoo e ka bang 100%. Tobetsa litšoantšo ho bona PhotoSwipe lightbox e le mohlala.
Ho na le lingoliloeng tsa blog tse nang le linepe tsa khoutu tse seng li entsoe:
Ho Fetolana Haholo
Etsa Mekhoa e Tloaelehileng
Haeba u tloaelane le CSS, u ka hlophisa lintho tsa gallery ka tsela eo u batlang ka eona.
CSS ea mohlala o bontšitsoeng:
/* 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;
}Sebelisa HTML efe kapa efe
U ka sebelisa hoo e batlang e le HTML efe kapa efe. Ho na le lithibelo tse fokolang haholo. Mehlala e bontšitsoeng mona ka bobeli e hlahisa sephetho se tšoanang sa pono.
Mohlala 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>Mohlala 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>Lintlha Tse Molemo haholoanyane
Lazy Loading
E kenya litšoantšo tseo u li boneng kapele
Sena se jara feela litšoantšo tse haufi le sebaka se bonahalang. Kahoo bandwidth e eketsehileng bakeng sa litšoantšo tse bonahalang.
API
E u lumella ho etsa le ho feta
Sena se o nolofalletsa ho kenya le ho tlosa litšoantšo ka mokhoa oa lenaneo, ho fetola likhetho kapa ho arabela liketsahalong.
Keketso
E u fa litharollo bakeng sa maemo a motho ka mong
Ke pokello ea lingoloa tsa blog tse holang ha nako e ntse e ea 'me li na le likhoutu tse thusang ho atolosa habonolo Gridzy.Gallery .
Mosebedisi Mabapi le Laeborari
Ha re theoheleng khoebong!
Tobetsa konopo ho hlahloba merero!