Skip to content

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

Notifications You must be signed in to change notification settings

ygamFine/zing-gallery

 
 

Repository files navigation

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,所以这两个工具必不可少。

  1. 将照片放入resources/photos文件夹
  2. 执行命令npm i安装依赖
  3. 执行命令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目录。

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 84.1%
  • CSS 11.7%
  • HTML 4.2%