Create A Simple FullScreen Image Gallery Slideshow With JS & CSS

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.

HTML Structure & CSS Presentation

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

<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.
• 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.

The Script

The entire animation script is as follows:

window.onload = function() {

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 flexbox 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. Edit this on Codepen