Gridzy.Gallery
JavaScript 库
我发现的最棒的拍照体验。终于有人知道如何正确拍照了！
Milo Persic – 图书馆用户
快速洞察
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。
显示原始语言（英语）5 星（满分 5 星）
以 CodeCanyon 评论的形式撰写
这个插件太棒了——我以为我需要花几个小时进行自定义，但其实很简单。我调整了它以与高级自定义字段配合使用，这样我就可以通过管理员完全控制如何创建我的 WordPress 图库。谢谢！
显示原始语言（英语）5 星（满分 5 星）
以 CodeCanyon 评论的形式撰写
我们开始做事吧！
单击按钮查看计划！