Pan and Zoom style Slidehows on the Photo Dharma website


I have recently implemented a new type of slideshow on certain pages in the Photo Dharma website, which pan and zoom the photographs in Ken Burns style, which effectively animates the photographs.

The implementation is the power of the WOW slider, which builds on the jQuery javascript framework. The slider itself has many other effects, like blinds, blast, fade, squares and more, but the one that impressed me was the Ken Burns effect.

The slider has some limitations, which prevents me from using it in every page. The main one is that the photos all have to have the same aspect ratio. Most of mine are 4×3 (landscape), but not all, quite a few are 3×4 (portrait).

When the slider sets those up it simply takes an arbitrary segment out of the center of the photograph, which may or may not be where it should be cut. Because of this I have trimmed the photographs first, and occasionally left one or two out, which wouldn’t work in landscape ratio.

A second limitation, at least from a developers’ point of view, is that you have to fix the size of the photograph (for instance 800px x 600px), and it will show at that size, no matter what the screen size is on the client side. I got round that problem by writing a function I will publish in a separate post tomorrow.

The slider has been implemented in the Best of… series and a couple of other places at present. The original slideshow, without animations but with the whole photograph, is still available on the same pages.

To see it in action go to one or other of the following pages (click on Play Moving Slideshow):

another implementation which is particularly effective is on wide angle landscapes like these:

where the ratio of the photographs is 212:100

On those pages click on the Play Moving Slideshow link and enjoy the effect.


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>