翻相册(fanxiangce.com)

搭积木

本来说要好好学习一下前端技术,可没过几天,又开始了堆积木式的创造:把各种JS库,CSS库搭配起来,最终用Python做胶水实现了一个网页相册生成器。顺便用Bootstrap的模板做了一个介绍页:翻相册(fanxiangce.com)

 

翻相册

故事还要从我上次做幻灯片讲起。用impress.js做了幻灯片不久,就想着用Python搭配impress.js做一个幻灯片生成器,最终实现的效果是:可以从一个文本文档里读取文本,每一行创建一张幻灯片,坐标可以固定(通过在每一行的结尾传入坐标参数),也可以随机(没解决遮盖问题)。做着做着,发现这并不实用。估计没人愿意用这种死板无聊的幻灯片。没过几天,又想用impress.js搭配csshke做一个记单词的网页程序,几天后因为能力不够被暂时搁置了。

接着,又有了新的想法,在原来的幻灯片生成器的基础上改了改,做成了一个照片墙生成器。原理很简单。就是通过获取图片的数量和文件名,生成足量的坐标,然后用Python生成相应的div,最后连接头尾组成一个完整的HTML文件。做成这样一个照片墙:

图片墙示例

点击任一张图片可以拉近,点击相邻图片可以移动位置。

又过了几天,照片墙实现了tooltip功能,可以自动把文件名(没有格式后缀)设为tooltip内容。我想到的一个理想的应用场景是:集体制作照片墙,每个人上传自己的照片给某个人,以自己的名字作为文件名,收集照片的人只需要上传照片,设置标题,然后点击生成。打开后每张照片在鼠标掠过时都会用tooltip显示姓名。像这样:

tooltip

tooltip的颜色可以自定义。

故事还没完。又过了几天,我买了fanxiangce.com,做了一个粗糙的介绍页。发现功能还太单调,和其他的在线相册相比没有什么吸引力。又实现了立体相册,像这样:

3d

点击任意一张照片可以拉近

随机散落(仍然没有解决遮盖问题),像这样:

随机散落的照片,点击任一张可以拉近

随机散落的照片,点击任一张可以拉近

标签云(使用svg3dtagcloud.js):

基于文本的标签云

基于文本的标签云

点击标签就会打开相应的图片:

使用remodal.js实现的弹窗

使用remodal.js实现的弹窗

现在只是一个简单的demo,未来还会实现很多功能,比如把标签换成图片缩略图。可以参见TagCanvas

 

总结

上面的相册都有相应的demo,欢迎到翻相册上体验。也欢迎申请试用。虽然已经花了很多时间在上面,但是要做的事情还有很多。比如实现模拟翻页的相册,让图片更美观的排列,不是单一的对齐。等我暑假学习一下Flask和JS,把网站做出来,顺便把电脑端程序和在线程序做出来,就可以开放注册和在线自动生成相册了。

 

说说你的想法吧!

邮箱不会被公开,必填项已用*标出。

*

*