GitHub

您所在的位置:网站首页 电子相册网页制作 GitHub

GitHub

2024-07-15 19:15| 来源: 网络整理| 查看: 265

Zing Gallery

基于node.js的web相册,让摄影照片的展示更加简单 Web albums based on node.js, more simple to show photography photos

1、功能

此Demo供体验。 扫码可体验Mobile交互:

zing-galler qrcode

自动获取照片信息(快门、光圈、ISO、时间等) 自由为相册设置信息(封面、名称、描述) 相册可加密访问 适配PC与移动侧展示 移动侧可使用多指手势操控图片,与原生图库一般流畅 2、外观 PC-常规

PC-照片展示

Mobile-照片展示

Mobile-手势说明

3、使用

相册基于node & npm,所以这两个工具必不可少。

将照片放入resources/photos文件夹 执行命令npm i安装依赖 执行命令npm run start启动相册 4、高级用法 4.1 设置全局信息

编辑config.js文件

module.exports = { title: 'Zing Gallery', // 相册名 wording: { noAccess: '抱歉,你没有权限访问' // 无权限访问的提示 }, albums: { // 相册信息,在文档4.2中详解 "贵阳": { thumbnail : "IMG_0331.JPG", sort: 1 }, "千户苗寨": { description : "没有什么能够阻挡", thumbnail : "IMG_0424.jpg", name: "千户苗寨" }, "私密": { description : "私密", name: "私密 | 密码是233", password: "233", passwordTips: "密码是233" } } } 4.2 设置相册信息

比如有一个叫xxx的相册,它的位置应该是resources/photos/xxx

编辑config.js文件的albums字段,增加一个xxx的对象,可以为其设置相册信息:

albums: { "贵阳": {}, "千户苗寨": {}, "私密": {}, "xxx" : { "description" : "1983年小巷12月晴朗……", // 该相册的描述;如果没有,则不展示 "thumbnail" : "IMG_0424.jpg", // 封面图;如果没有,则默认取第一张作为封面 "name": "第七章", // 相册名;如果没有,则相册名为xxx "password": "233", // 私密相册,密码为233 "passwordTips": "密码是233" // 密码提示 "noDate": false, // 不展示时间;如果为true,则不展示照片时间信息;默认没有,即false "sort": 1 // 排序;为1时是时间逆序;默认或不填是时间正序 } } 5、前端开发者

如果你是前端开发者,需要做一些页面上的定制,你需要使用webpack进行开发。

执行命令npm run dev(不压缩,一般开发时用)或npm run dist(压缩)

将assets/src里的源文件编译到assets/dist目录。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3