All Projects → litten → Zing Gallery

litten / Zing Gallery

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

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Zing Gallery

Thumbsup
Generate static HTML photo / video galleries
Stars: ✭ 493 (+22.94%)
Mutual labels:  photos, photography, gallery
google-photos-vue
Google Photos album viewer built with Vue.js
Stars: ✭ 17 (-95.76%)
Mutual labels:  photos, gallery, photography
Photo Blog
The Photo Blog Application based on Laravel 5 and Vue.js 2 + Prerender
Stars: ✭ 55 (-86.28%)
Mutual labels:  photos, photography, gallery
Chevereto Free
Self-hosted Image Hosting solution. Start your own Flickr/imgur alternative with your own rules.
Stars: ✭ 2,275 (+467.33%)
Mutual labels:  photos, photography, gallery
PhotoMiner
Photo finder application for macOS
Stars: ✭ 102 (-74.56%)
Mutual labels:  photos, photography
Selfhosted-Google-Photos-Alternative
A complete guide on exiting Google, Amazon or any proprietary service Photos storage with all the features you would want.
Stars: ✭ 143 (-64.34%)
Mutual labels:  photos, gallery
timeline
Timeline - A photo organizer
Stars: ✭ 39 (-90.27%)
Mutual labels:  photos, photography
jekyll-photos
Dead simple solution to add a photo gallery to a Jekyll site.
Stars: ✭ 47 (-88.28%)
Mutual labels:  photos, gallery
hes-gallery
Light, dependency free, responsive gallery script
Stars: ✭ 27 (-93.27%)
Mutual labels:  photos, gallery
cgallery
an easy to use, minimalistic image gallery script for your website
Stars: ✭ 17 (-95.76%)
Mutual labels:  gallery, photography
gatsby-theme-gallery
🏞 A Gatsby Theme for adding a gallery to your site.
Stars: ✭ 40 (-90.02%)
Mutual labels:  photos, gallery
moul
See https://github.com/moulco/moul
Stars: ✭ 17 (-95.76%)
Mutual labels:  photos, photography
myphotoshare
MOVED TO GITLAB! --- A Web 2.0 Photo Gallery Done Right via Static JSON, Dynamic Javascript and a bit of php for sharing
Stars: ✭ 12 (-97.01%)
Mutual labels:  photos, gallery
go-unsplash
Go Client for the Unsplash API
Stars: ✭ 70 (-82.54%)
Mutual labels:  photos, photography
photos
"Fx Fotos" is an opensource gallery app in react native with the same smoothness and features of Google Photos and Apple Photos. It is backend gnostic and connects to decentralized backends like "box", "Dfinity", "Filecoin" and "Crust".
Stars: ✭ 620 (+54.61%)
Mutual labels:  photos, gallery
meiupic
简洁好用的多用户图片社区。
Stars: ✭ 165 (-58.85%)
Mutual labels:  gallery, photography
picsort
Organize your photos by date in one click 👏
Stars: ✭ 22 (-94.51%)
Mutual labels:  photos, photography
Rocket-Notes
The World's Fastest Note Taking App. Fast. Simple. Create a note in one tap! Create image and text notes directly from your home screen!
Stars: ✭ 20 (-95.01%)
Mutual labels:  photos, gallery
Zoomwall.js
A content-focused photo gallery using a horizontal masonry layout that scales up in lightbox mode.
Stars: ✭ 254 (-36.66%)
Mutual labels:  photos, gallery
Ownphotos
Self hosted alternative to Google Photos
Stars: ✭ 2,587 (+545.14%)
Mutual labels:  photos, gallery

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目录。

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].