Redesign of Photo Dharma Website

Last year I was tasked with designing the Sri Lankan Pali Texts website to house scanned copies of the Sri Lankan edition of the Tipitaka. The materials were passed to me as large pdf files, weighing on average between 25MB and 100MB.

Of course it would always be possible to upload them to a server and add a page with links to them, but most browsers still cannot handle such large files – they are likely to crash – and even if they could then the load times would be very long, and the only reasonable thing to do would be to download the files to the hard disk and access them from there.

That is not really very convenient, especially if you only want to access one discourse, or see one section of a large book, or find out when it was published, or who edited it. I therefore decided to extract the images from the pdfs and look around for technologies that could be used to deliver them on demand.

After some experimentation I finally settled on a very lightweight implementation of the lightbox technology called Lytebox. It is basically a javascript framework whose main purpose is to serve up image files one at a time in a slideshow, and as the individual files were quite small (10 – 30 KB) that has worked very well.

* * *

For some time I have been a little dissatisfied with the design of my Photo Dharma website. When I began the website in 2008 it was designed using the Arclab Thumb Studio to present a simple slideshow, with links to the high-definition files.

Later on I added in a thumbnails preview page, which gives a better overview of the photographic materials that are available – but I did so by adding a new Thumbnails page, which not only meant a click through to get to the page, which required extra loading time, but also meant duplicating all the information, maps and other materials on both pages.

So I have been thinking about how to integrate the pages for some time, and with my experience with Lytebox on the SLPT website, I have finally got around to implementing it. Now the landing page contains all the thumbnails, and there is the ability to launch a slideshow direct from that page via a direct link, or from clicking on any of the titles of the photographs, which simplifies the whole experience (cont. below).


Page showing Thumbnails and Slideshow Link

Page showing Thumbnails and Slideshow Link


Page showing Lightbox Slideshow

Page showing Lightbox Slideshow


The work involved has taken a good few weeks, as it entailed not only redesigning, but remaking, all the pages, which now number around 250, and making sure they are all working OK.

During the course of the work I also upddated the information available on some of the pages, especially in the first section I prepared on Borobudur, so that is a much more informative experience now.

Because of the way the pages are now organised I also decided to split very large pages into sections, so that any page loads in a reasonable time, which only then will give access to the slideshow. This affects only very large collections of photographs (80+), and not the majority of the pages.

The Lytebox technology is able to deliver other things besides images – in fact it can serve up more or less anything you care to put in it – so I have also redesigned the way videos are accessed. This also saves loading time as it is only delivered on demand. I have also updated the Videos page to match.

One thing I would like to mention is this: working alone I have a limited ability to check the whole website through and make sure there are no glitches or problems on it, so I rely on those who use the website to give me feedback on this. So if you head over to the site and find something is not working please do inform me so I can correct it.



Possibly Related Posts:

Leave a Reply




You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>