Gridzy.Gallery
Pirtûkxaneya JavaScript
Ezmûna wêneya herî ecêb a ku min dîtiye. Di dawiyê de kesek fêm dike ku meriv çawa vê yekê RAST dike!
Milo Persic - bikarhênerek pirtûkxaneyê
Insight Zû
1 tutorial video minute
Vê yekê tenê di deqeyekê de fêr bibin:
Bikaranîna bingehîn
Veavakirin
Parzûnên
Xuyabûnî
Styles Caption
Ji bo çareseriyên bilez ên hêsan şêwazên sernavê yên pêşwextkirî
Wêneyan bihejînin da ku şêwaza sernavê ya mîhengkirî bibînin. Bi bişkok û hilbijêrên rengan re bilîzin da ku şêwaza çêkirî ya hatî destnîşankirî mîheng bikin.
Etîket & Parzûn
Ji bo ku hûn wêneyên xwe bi rengek birêkûpêktir nîşan bidin
Pergala fîlterê ya çêkirî zehf maqûl e. Rastiya ku hilbijêrên CSS-ê ji bo fîlterkirinê têne bikar anîn bi rastî hema hema her celeb parzûnê çalak dike.
Pir Lihevhatî
Bi Gelek Lightboxan re tê bikar anîn
Galeriyê bi her ronahiyê re bikin yek. Îhtîmala ku ew lihevhatî ye hema hema 100%. Li ser wêneyan bikirtînin da ku ronahiya PhotoSwipe wekî mînak bibînin.
Gotarên blogê yên bi qutên kodên amade hene hene:
Pir Flexible
Şêweyên Xweser biafirînin
Heke hûn bi CSS-ê dizanin, hûn dikarin tiştên galeriyê bi awayê ku hûn dixwazin şêwaz bikin.
CSS ya nimûneya nîşankirî:
/* 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;
}Her HTML-ê bikar bînin
Hûn dikarin hema hema her HTML-ê bikar bînin. Tenê pir hindik sînor hene. Mînakên ku li vir têne xuyang kirin her du jî heman encama dîtbarî derdixînin.
Mînak 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>Mînak 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>Taybetmendiyên Bikêrtir
Lazy Loading
Wêneyên weyên dîtine zûtir bar dike
Ev tenê wan wêneyan bar dike ku nêzî devera xuyayî ne. Ji ber vê yekê ji bo wêneyên xuyayî bêtir bandfireh.
API
Destûrê dide we ku hûn pir zêde bikin
Ev dihêle hûn wêneyan bi bernamekî lê zêde bikin û jê bikin, vebijarkan biguhezînin an jî li bûyeran bertek nîşan bidin.
Extensions
Ji bo senaryoyên kesane çareseriyan pêşkêşî we dike
Ew berhevokek gotarên blogê ye ku bi demê re mezin dibin û perçeyên kodê yên arîkar hene ku bi hêsanî Gridzy.Gallery dirêj bikin.
Bikarhêner Derbarê Pirtûkxaneyê
Werin em dest bi karê xwe bikin!
Bişkojka bikirtînin da ku hûn planan kontrol bikin!