Sorting a list of photos in HTML5

Published on: 10th Feb 2015
In Technical

When I created this website, I had the foresight to add a display order option on every photo in an article. But I did not see the need to add functionality to do the actual sort of the list of photos

The idea of displaying photos in a certain order makes common sense but when I created the website, I did not see the need for a visual sort routine. In most articles I publish, there will be 5 to 15 photos. With careful planning, I ensure that I upload the photos in the way I want them to be displayed. A screen capture of the dragging of a photo to change its position in the grid [195]But when I wrote the article about the the 2014 Yixian Photography Festival I decided to show about two photographs of each South African photographer who's photos were exhibited. I also wanted to show a set of photos about the festival activities. This ended up as a very large set of photos - more than 100 photos. I quickly lost track of the display order while uploading. I then tried to manually change the display order but the experience was very similar to playing the blindfold Pin-a-tail-on-the-donkey game.

I decided that I need a sorting routine for my website to easily (and fast) sort the photos as if I was moving a set of slides around on a light box.

For the non-programmers reading this, let me tell you one of the character traits of a successful software programmer: A successful software programmer is a person that is by nature a very lazy person. You see,the job of a software programmer is to find ways to make life easier, and the more lazy you are, the more important it become to find an easier way to do the task at hand.

I thus started out searching on the internet for examples of sorting a list using drag and drop techniques. Very soon I found a programmer (Ali Farhadi) who not only explained how to do it, but also provided a jquery plug-in software library that utilises the HTML5 drag and drop API to implement exactly what I needed. It took my only 20 minutes to implement it in eight lines of code!

So, if you are a programmer and you are in the market for a very well implemented drag and drop list shuffle routine, visit his website []. You will find this library (and other interesting stuff) on the projects page.

(If you have read up to here and did not click on a photo yet, do so to see them in larger format and also to browse through the rest of this gallery)