dark theme

PhotoAlbum.js

What is PhotoAlbum.js ?

It is a small side-project I have started a month ago to show pictures taken during my holidays. I could have used one of the many web sites that exist just for that purpose but I prefer to host my own content.

I had 2 main goals:

  • generate a static website: I use a very small server and I do not want it to be overloaded by php/node.js/ruby/… generating web pages. This is the same concept I use for this blog.
  • be able to write a legend about each picture.

I decided to go with node.js to build that project. I know javascript for quite a long time but never achieved anything with node.js.

Features

  • infinite scrolling of the pictures: load more thumbnails as you scroll the page,
  • the legend can be written using markdown,
  • have a timer in the diaporama or change images as you like,
  • use the html5 history API in the diaporama to make the experience more natural,
  • an editor to write those legends and sort or remove images,

Demo

I wrote a small demo using pictures from photos-public-domain.com:

You can find the code on github.

Acknowledgements

The code uses the following Node.js modules:

It also uses:

The background can be found at sublepatterns.com. The icons were modified from the ones at raphaeljs.com.

TODO

I am currently happy with the state of my photo album generator. There are still few things that can be improved/added:

  • use some web-font to improve the look,
  • play a bit more with exif data: I wanted to put a location mark in diaporama mode for pictures having some GPS data.
  • use the EFL instead of imagemagick to speed things up,
  • have some kind of animation when changing images,
  • make the diaporama timer more readable,
  • preload next image in diaporama mode,
  • have a better support for mobile phones: the diaporama UI should be changed.
  • IE support :D
  • add comments support with disqus and we'll have a flickr clone :)
blog comments powered by Disqus

If you enjoyed this article, feel free to Flattr this.