Click to bring the slideshow in and out of Fullscreen mode
Part of the The Fullscreen, Dialog, Storage & Speech APIs Reading List

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.

HTML Structure & CSS Presentation

The markup is very simple. For the sake of clarity I am using minimized HTML5: while the code will , there’s much that could be done to improve its . 

<div id="slideshow-container">
	<figure id="slideshow">
		<img src="dada-voltaire-tinkerbot.jpg" alt>
		<img src="happy-bot-tinkerbot.jpg" alt>
		<img src="sgt-swift-tinkerbot.jpg" alt>
		<img src="xf-3-fandicaff-tinkerbot.jpg" alt>
	</figure>
</div>

The CSS is almost as simple: 

@keyframes fadey {
	0% { opacity: 0; }
	15% { opacity: 1; }
	85% { opacity: 1; }
	100% { opacity: 0; }
}
figure#slideshow {
	width: 80%;
	margin: 0 auto;
	position: relative;
}
figure#slideshow img {
	position: absolute;
	left: 0; top: 0;
	width: 100%;
	height: auto;
	opacity: 0;
}
figure#slideshow img:first-child { 
	position: relative;
}

There are a few important points to note:

  • I’m assuming that the responsive images will expand to fill the screen; you could place a max-width limit on the <figure> element if that was not the case.
  • I’ve employed a CSS keyframe animation to create the fade effect for the images. This provides greater ease-of-use in setting the in-out points, compared to Bezier curves in a transition.
  • I’m also assuming you’re using prefix-free or a similar tool to generate the prefixed versions of the keyframe animation.
  • The first image is position: relative to ensure that the <figure> element is the right size and shape for centering; all other elements are position: absolute so that they can be stacked on top of each other.
  • All code is shown in the latest, prefix-free version for clarity.

The Script

The entire animation script is as follows: 

window.onload = function() {
	var imgs = document.getElementById('slideshow').children;
	interval = 8000;
	currentPic = 0;
	imgs[currentPic].style.webkitAnimation = 'fadey '+interval+'ms';
	imgs[currentPic].style.animation = 'fadey '+interval+'ms';
	var infiniteLoop = setInterval(function(){
		imgs[currentPic].removeAttribute('style');
		if ( currentPic == imgs.length - 1) {
			currentPic = 0;
		} else {
			currentPic++;
		}
	imgs[currentPic].style.webkitAnimation = 'fadey '+interval+'ms';
	imgs[currentPic].style.animation = 'fadey '+interval+'ms';
}, interval);
}

The code should be simple to follow: after referencing the images in the <figure> element, I set the time in milliseconds for every image to animate, and indicate that I want the very first picture to start.

Then, an infinite loop is set up. The style attribute applied to the current image to animate it is removed; and a counter advanced to animate the next one after the appropriate interval has passed.

This code is deliberately limited: I’m only building the animations for recent, vendor-prefix-free versions of Firefox and Internet Explorer, together with versions of Safari and Chrome.

Leading To FullScreen

For understandable reasons, we can’t just force a browser window fullscreen. Rather, it’s easiest to have the content already on the page, and then create a link or button to make that specific content fullscreen and hide the rest. I’ve introduced the fullScreen code before: 

function fullScreen(element) {
	if (element.requestFullscreen) {
		element.requestFullscreen();
		} else if (element.webkitRequestFullscreen ) {
			element.webkitRequestFullscreen();
		} else if (element.mozRequestFullScreen) {
			element.mozRequestFullScreen();
		}
	}

The fullscreen request is typically initiated by a link or button: 

<a href=# onclick=" fullScreen(document.getElementById(slideshow)) "> Clicky</a>

This can actually work in your favour: by hiding the gallery at the start and only revealing it when fullscreen mode is initiated, you can effectively preload a number of images before the slideshow begins.

Black Backgrounds & Overlarge Images

By default, Firefox expands fullscreen content to its maximum width and fills the background with black. Webkit keeps the black background, but does not increase the image size, instead centering the browser window. This can make fullscreen galleries appear very different, leaving any images extremely large, extending off the bottom edge of the screen while fading in and out over black; not exactly what we are after.

As I’ve previously discussed, every implementation of the FullScreen mode supports a slightly odd pseudo-class that detects if the element is in fullscreen mode. With that in mind, we can do two things. First, make the outer slider-container element fullscreen, rather than its child: 

<a href=# onclick="fullScreen(document.getElementById(slideshow-container))">Clicky</a>

Second, ensure that this element has a white background, and centers its children in the window, accounting for a variety of aspect ratios: 

#container:fullscreen {
	display: flex;
	justify-content: center;
	align-items: center;
}
#container:fullscreen figure {
	width: 80%;
	margin: 0 auto;
}
:-webkit-fullscreen {
	width: 100%; height: 100%;
}
*:-moz-fullscreen {
	background: #fff;
}

Again, I’m only showing the most recent version of the CSS spec of to center the content; you can read the entire code in my article Seven Ways To Center With CSS. Note the separate line for Webkit, necessary to ensure that the fullscreen element covers the black background.

There’s much more we can and will do to this basic setup, but I hope you’ll find this to be a good start.

Photographs courtesy of Tinkerbots, licensed under Creative Commons.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/raOeez