Image Panning and Zooming

January 10, 2012

Ever hear of a guy named Ken Burns? Neither did I, until I came across this web site. Turns out Ken Burns employed a technique in video production that involved panning and zooming using still imagery, which is where the Ken Burns effect got its name. We can use this same technique in our open source digital signage Presentations.

First, start by saving this CSS and this Javascript and hosting it on a server (you could link to these files directly if you wanted to, but the owner could remove them at any time, so it's safer to host them yourself). In the Presentation's HTML, link to both files. It is important to include the Javascript file just before the end of the body tag, while the link to the CSS can go in its usual place in the head tag:

<head>
...
<link rel="stylesheet" href="path/to/kenburns.css" />
</head>
<body>
...
<script src="path/to/kenburns.js"></script>
</body>

You then need to add HTML inside your Placeholder that is similar to the following:

<div id="slideshow">
<img src="http://c803761.r61.cf2.rackcdn.com/KenBurns/01.jpg" alt="">
<img src="http://c803761.r61.cf2.rackcdn.com/KenBurns/02.jpg" alt="">
<img src="http://c803761.r61.cf2.rackcdn.com/KenBurns/03.jpg" alt="">
</div>

Get started with Rise Vision

Just replace the image URLs with URLs to the images that you want to use and add as many as you like. This demo uses images that are 240x160. If you are using images with different dimensions, you are likely going to have to customize the CSS to make everything look just right.

Click here to see a live demo.