I’ve been interested in creating a simple in-browser “screensaver” app for a long time. This early beta, currently supported only in Chrome, creates a “Ken Burns effect” for selected images from your local network with an optional custom soundtrack: use the controls above to start the demo. If you don’t have Chrome, a video is included below.

Read more about BurnsBox Beta

Right now my 2^nd year students are working on an interactive map for another class. Inevitably, they want to feature some ambitious code in their projects, including a fullscreen web image gallery. Since I haven’t yet officially started teaching them JavaScript, I had to make sure that the solution was very easy to apply. Thus, the code below. I’ve also linked through to the fullscreen example in the example above.

While it would be possible to create a fade-in-out gallery like this in pure CSS, the inclusion of the FullScreen API necessitated some scripting. I decided to take advantage of this and apply the CSS animation to the images via JavaScript, providing the opportunity to add JavaScript-driven UI controls in future versions.

Read more about FullScreen Image Slideshow With JS & CSS

Integrating Retina image versions onto web pages is optional in most cases… but when images go fullscreen on desktop, there are no alternatives but to switch to a HiDPI version, for several reasons:

Read more about HiDPI Images for Fullscreen Display