Gridzy.Gallery
JavaScript номын сан
Миний олж мэдсэн хамгийн гайхалтай гэрэл зургийн туршлага. Эцэст нь хэн нэгэн үүнийг хэрхэн ЗӨВ хийхийг ойлгох болно!
Мило Персик - номын сангийн хэрэглэгч
Шуурхай ойлголт
1 минутын видео заавар
Үүнийг хэдхэн минутын дотор мэдэж аваарай:
Үндсэн хэрэглээ
Тохиргоо
Шүүлтүүр
Гадаад төрх
Тайлбарын хэв маяг
Шуурхай шийдлийг хялбар болгох үүднээс урьдчилан тодорхойлсон тайлбарын загварууд
Тохируулсан тайлбарын хэв маягийг харахын тулд зурган дээр гүйлгэ. Үзүүлсэн загвараа тохируулахын тулд товчлуурууд болон өнгө сонгогчоор тоглоорой.
Шошго ба шүүлтүүр
Өөрийн зургуудыг илүү бүтэцтэй байдлаар харуулахын тулд
Суурилуулсан шүүлтүүрийн систем нь маш уян хатан байдаг. CSS сонгогчийг шүүлтүүрт ашигладаг нь бараг бүх төрлийн шүүлтүүрийг идэвхжүүлдэг.
Өндөр нийцтэй
Олон Lightbox-той ашиглах боломжтой
Галерейг дурын гэрлийн хайрцагтай хослуул. Энэ нь нийцтэй байх магадлал бараг 100% байна. Зураг дээр дарж PhotoSwipe гэрлийн хайрцгийг жишээ болгон харна уу.
Маш уян хатан
Тусгай загвар үүсгэх
Хэрэв та CSS-ийг мэддэг бол галерейн зүйлсийг хүссэнээрээ загварчилж болно.
Үзүүлсэн жишээний CSS:
/* 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;
}Ямар ч HTML ашиглах
Та бараг ямар ч HTML ашиглаж болно. Зөвхөн маш цөөхөн хязгаарлалт байдаг. Энд үзүүлсэн жишээнүүд хоёулаа ижил харааны үр дүнг гаргадаг.
Жишээ 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>Жишээ 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>Илүү ашигтай шинж чанарууд
Залхуу ачаалж байна
Таны үзсэн зургуудыг илүү хурдан ачаална
Энэ нь зөвхөн харагдах хэсэгт ойрхон байгаа зургуудыг ачаална. Тиймээс харагдахуйц зургуудын өргөн зурвасын өргөн.
API
Илүү ихийг хийх боломжийг танд олгоно
Энэ нь танд зураг нэмэх, устгах, сонголтуудыг өөрчлөх эсвэл үйл явдалд хариу үйлдэл үзүүлэх боломжийг олгоно.
Өргөтгөлүүд
Бие даасан хувилбаруудын шийдлүүдийг танд санал болгож байна
Энэ нь Gridzy.Gallery хялбархан өргөтгөхөд тустай кодын хэсгүүдийг агуулсан, цаг хугацааны явцад өсөх блог нийтлэлүүдийн цуглуулга юм.
Хэрэглэгч Номын сангийн тухай
Ажилдаа орцгооё!
Төлөвлөгөөнүүдтэй танилцахын тулд товчлуур дээр дарна уу!