Gridzy.Gallery
Raibhurari yeJavaScript
Most zvinoshamisa photo ruzivo ndakawana. Pakupeisira mundhu unozwisisa kuti unozviita kudini RIGHT!
Milo Persic - mushandisi weraibhurari .
Kukurumidza Kuona
1 miniti vhidhiyo yekudzidzisa
Funda izvi muminiti imwe basi:
Kushandiswa kwekutanga
Kugadzirisa
Zvinosefa
Kuyezana
Mazwi ezvinyorwa
Zvakafanotsanangurwa zvinyorwa zvitayera kuti zvive nyore nekukurumidza mhinduro
Hover mifananidzo kuti uone yakagadzirirwa caption maitiro. Tamba nemabhatani uye mavara pickers kuti configure yakaratidzwa yakagadzirwa-mukati maitiro.
Tags & Zvinosefa
Kuti ukhombise mifananidzo yako nenzira yakarongeka .
The yakavakwa-mukati sefa hurongwa zvikuru zvinosununguka. Ichokwadi chekuti CSS selectors inoshandiswa pakusefa zvemene inoita kuti anenge chero mhando yekusefa.
Inoenderana zvikuru
Inoshandisika Nemabhokisi Echiedza Akawanda .
Sanganisa gallery ne chero chiedza bhokisi. Mukana wekuti inoenderana inenge 100%. Dzvanya mifananidzo kuti uone bhokisi rechiedza rePhotoSwipe semuenzaniso.
Kune zvinyorwa zvebhurogu zvine zvinyorwa zvekodhi zvakagadzirirwa:
Inochinjika zvikuru
Gadzira Masitayera Etsika
Kana iwe uchiziva CSS, unokwanisa kugadzira zviro zvegalari nenzira yaunoda.
CSS yemuenzaniso wakaratidzwa:
/* 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;
}Shandisa chero HTML .
Unokona kushandisa anenge chero HTML. Kune zvishoma zvikuru zvinorambidzwa. Mienzaniso inokombidzwa pano yeshe inobudisa mhedzisiro imwechete inoonekwa.
Muenzaniso 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>Muenzaniso 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>Zvimweni Zviro Zvinodetsera .
Kurema Kurodha
Inorema mifananidzo yako yakaonekwa nekukurumidza
Izvi zvinorema chete iyo mifananidzo iri pedyo nenzvimbo inoonekwa. Saka bandwidth yakawanda yemifananidzo inooneka.
API
Inotendera kuti uite zvakawanda .
Izvi zvinotendera kuti uwedzere uye kubvisa mifananidzo programmatically, kuchinja zvisarudzo kana kuita zviitiko.
Zviwedzeredzo
Inokupa mhinduro dzemamiriro ezvinhu ega ega
I muunganidzwa we zvinyorwa zve blog zvinokura ngekuhamba kwenguva uye zvine zvikamu zvekodhi zvinobatsira kuti zviwedzere nyore nyore Gridzy.Gallery .
Mushandisi Nezve Raibhurari .
Ngatiende pashi ku bhizinesi!
Dzvanya bhatani kuti uone zvirongwa!