demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

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

Switching To High Resolution Images For Fullscreen Display On The Web

javascript / fullscreen api

Estimated reading time: 2 minutes, 30 seconds

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:

  • Thumbnail images will look awful when expanded to fullscreen size, demanding a solution.
  • In most cases fullscreen mode will be used to display just a few images, allowing us to concentrate on edge cases rather than trying to code a solution for every image.
  • Fullscreen mode must be engaged by the user, allowing plenty of opportunity to preload images before user interaction.
  • Fullscreen mode is not yet supported on mobile devices, so we don’t have to worry about crushing bandwidth.

The best current approach uses a combination of srcset and and the Fullscreen API:

The HTML

<figure id="lake">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/lake-small.jpg" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/lake-small.jpg 1600w, https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/lake-large.jpg 2400w" alt="Photograph of Lake Louise, British Columbia">
<figcaption>
Fullscreen API with srcset Image Replacement <button>Click</button> to present content in fullscreen mode. Press <kbd>ESC</kbd> to cancel.
</figcaption>
</figure>

The use of srcset's w syntax ensures that the SD version of the image is presented if the viewport is 1600 device pixels wide or less.

The CSS

The image is centered in fullscreen mode using ; the <figcaption> is hidden in the same. Note that the :fullscreen is written using the final spec, with vendor prefixes on seperate lines, as combining them in group selectors will sometimes fail in certain browsers:

#lake { position: relative; font-size: 0; }
:-moz-full-screen figcaption { opacity: 0; }
:-webkit-full-screen figcaption { opacity: 0; }
:full-screen #figcaption { opacity: 0; }
#lake figcaption {
background: rgba(255,255,255,0.75);
position: absolute; bottom: 0;
margin: 0; width: 100%;
padding: 1rem;
font-size: 1.3rem;
transition: 1s;
}
#lake img { width: 100%; height: auto; }
:-moz-full-screen img { width: 100%; }
:-webkit-full-screen { width: 100%; }
:-moz-fullscreen {
display: flex;
align-items: center;
justify-content: center;
}
:-ms-fullscreen {
display: flex;
align-items: center;
justify-content: center;
}
:fullscreen {
display: flex;
align-items: center;
justify-content: center;
}

The button requests fullscreen display via JavaScript:

function launchFullscreen(element) {
if (element.requestFullScreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
var lake = document.getElementById("lake"),
fullbutton = lake.getElementsByTagName("button")[0];
fullbutton.onclick = function() {
launchFullscreen(lake);
}

Note that you will need to use the picturefill polyfill for browsers that currently lack support for the srcset attribute. Inspect the code for this article on CodePen

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.