Slideshow Redux

February 04, 2012

The problem with responsive slideshow plugins like FlexSlider and the like is the unnecessary large images a small screen mobile user is forced to download. There has been a lot of talk about the problem with responsive images lately. We have server side and client side adaptive image techniques as well as a few proposals for future implementations. How do we serve large slideshow images conditionally to large screens and save the mobile user from the excess downloads? I propose a technique that aims to answer that question.

Rethinking the Slideshow

We need a new way of thinking about featured content. If you think about the small screen first, thumbnails with titles are a great way to display featured content on mobile phones. The links of those thumbnails and titles follow to the appropriate page by default with no large images in the markup. We can then use those thumbnails as navigation when we scale up to larger screens and conditionally add our large slideshow images—adding onclick event handlers to the links making them change the large images. I've built a simple demo to show how this could be done. Check it out and make sure to refresh after resizing through the media query.

I'd like to think that there are endless possibilities for this type of conditional slideshow. Breaking out of the old standard way of designing sideshows and featured content. I hope there are designers out there that run with this and create light weight, flexible user interfaces.

The Basic Javascript

I need to give a lot of credit to Jeremy Keith for this idea as it is the same thinking he had for his article Conditional Loading for Responsive Designs. In my demo, I don't use a javascript library and tried to design a simple slideshow with the least amount of code possible. It may not support older browsers but this technique is more of a way of thinking rather than some code you can use as is. All the parts are there to make your own. Fork it on GitHub.

Below is a snippet of the javascript that does the conditional loading. The idea is to grab the big slideshow images if the slideshow container has a display:block css declaration.

//wait for the document to load
window.onload = function () {
// get #feature-container that holds our big images
  var feature = document.getElementById('feature-container'),
// get the style value of display on our big images container
  display = window.getComputedStyle(feature,null).getPropertyValue('display');
// if the #feature-container display value is block
  if (display == 'block') {
    //we are wide enough to pull in the big images via ajax
    // get images and markup via ajax

Latest Thoughts

Thanks for stopping by!