Gridzy.Gallery
JavaScript 庫
我搵到最驚喜嘅相片體驗。終於有人明白點樣做到呢一點！
米洛 · 佩西奇 – 圖書館嘅使用者
快速洞察
1 分鐘影片教學
只需一分鐘就可以學到呢樣嘢：
基本用法
配置
過濾器
外表
字幕樣式
預先定義嘅字幕樣式，方便快速解決
將滑鼠游標移到圖片上面，就可以睇到設定咗嘅字幕樣式。用啲掣同顏色選擇器嚟設定顯示嘅內置樣式。
高度兼容
可以同好多燈箱一齊用
將圖庫同任何燈箱結合。佢兼容嘅機率差唔多係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;
}例子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>用戶關於圖書館
我啱啱將 Gridzy 整合到我個網站入面，佢係有史以來最好嘅嘢！維倫 · 丹克，多謝你為呢件事所付出嘅所有努力。呢個係我搵到最驚喜嘅影相體驗。終於有人明白點樣做到呢一點！
顯示原文 ( 英文 )5 星中嘅 5 星
寫成 CodeCanyon 嘅評論
難以置信嘅格 .. 嘩。高度優化速度 .. 一定會留意更多 Helmut 嘅「藝術」作品
顯示原文 ( 英文 )5 星中嘅 5 星
寫成 CodeCanyon 嘅評論
呢個係一個設計得好好嘅justified格圖庫，係我搵到而家為止最好嘅。佢睇落唔錯，唔會阻住，對螢幕大小反應良好，有好多有用嘅選項，而且冇多餘嘅行李，而且使用時亦都好靈活。而且，作者係有回應力，總係有幫助，專業，友善同埋有 javascript down pat 。
顯示原文 ( 英文 )5 星中嘅 5 星
寫成 CodeCanyon 嘅評論
呢個外掛程式好正 – 我以為我需要花幾個鐘去自訂，但係好輕鬆。我將佢改編成同進階自訂欄位一齊使用，令我可以完全控制我嘅 WordPress 圖庫係點樣透過管理員建立。多謝你！
顯示原文 ( 英文 )5 星中嘅 5 星
寫成 CodeCanyon 嘅評論
我哋開始做嘢啦！
撳個掣嚟睇下啲計劃！