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.

Click to bring the slideshow in and out of Fullscreen mode

Right now my 2nd 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 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.

Photograph of Lake Louise, British Columbia
Fullscreen API with srcset Image Replacement to present content in fullscreen mode. Press ESC to cancel.

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: