Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/litten/zing-gallery
基于node.js的web相册，让摄影照片的展示更加简单 Web albums based on node.js, more simple to show photography photos
https://github.com/litten/zing-gallery
gallery node photography photos
Last synced: 8 days ago
JSON representation
基于node.js的web相册，让摄影照片的展示更加简单 Web albums based on node.js, more simple to show photography photos
- Host: GitHub
- URL: https://github.com/litten/zing-gallery
- Owner: litten
- Created: 2016-09-22T17:20:23.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-01-25T09:53:32.000Z (over 6 years ago)
- Last Synced: 2024-03-03T09:34:32.061Z (4 months ago)
- Topics: gallery, node, photography, photos
- Language: JavaScript
- Homepage:
- Size: 29.5 MB
- Stars: 427
- Watchers: 18
- Forks: 126
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
Lists
- awesome-github-star - zing-gallery
README
Zing Gallery
============
基于node.js的web相册，让摄影照片的展示更加简单
Web albums based on node.js, more simple to show photography photos
### 1、功能
此[Demo](http://litten.me/gallery/)供体验。
扫码可体验Mobile交互：
* 自动获取照片信息（快门、光圈、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``目录。