This is a two part article that will walk through how to build a thumbnail driven image carousel in an email. In this post we will work on getting it to work on mobile clients – specifically the native iPhone and Android mail app. In the second post we will add support for non-mobile email clients.

Update: Part 2 has now been posted!

As you can see from the screenshot above, we’ll be creating a carousel with thumbnails above the image. Users with email clients that aren’t supported will just see the image without the thumbnails.

Also this carousel will only allow for a single link – so this example will work great for multiple views of a product or in this example, views of a room in a hotel or property. This example is not a good fit for featuring multiple different products with each requiring their own link.

This post will build upon some of the techniques we covered in Interactive Images in Mobile Email so if this looks confusing, take a look at the earlier article as it is less involved.

Preparing the assets

For this example we’d need the four thumbnail pictures and four regular pictures. Make sure to size the thumbnails so they fit in a single row.

Main image and link

First we’re going to just create a container div that is going to hold our carousel. We’ll call the class “car-cont”. Then we’ll add the main image with a link and assign the class “car-img” to a div wrapping the link and image. The width and height of the container is set to the width and height of the main image.

<div class="car-cont" style="width:350px;height:263px;max-height:263px;
  overflow:hidden;position:relative;">
 <div class="car-img">
 <a href="http://.../link ">
  <img src="http://.../bed.jpg" width="350" height="263" 
     border="0" alt="Hotel" style="display:block;">
 </a></div>
</div>

Adding the thumbnails and additional images

Next we’ll add the thumbnails along with the additional images. Since the thumbnails would add vertical space and would overflow the container, we’ll hide the thumbnails and additional images initially using the hiding tricks covered in this article.

<div class="car-cont" style="width:350px;height:263px;max-height:263px;
  overflow:hidden;position:relative;">

<!--[if !mso]><!-- -->
<div class="car-thumb" style="max-height:0px;height:0px;overflow:hidden;">
  <img src="http://.../images/thumb-bed.jpg">
</div>
<div class="car-thumb" style="max-height:0px; height:0px; overflow: hidden;">
  <img src="http://.../images/thumb-table.jpg">
</div>
  <div class="car-img" style="max-height:0px;height:0px;overflow:hidden;">
  <img src="http://.../images/table.jpg" width="350" height="263" 
    border="0" style="display:block;">
  </div>
<div class="car-thumb" style="max-height:0px;height:0px;overflow:hidden;">
  <img src="http://.../images/thumb-pool.jpg">
</div>
  <div class="car-img" style="max-height:0px; height:0px; overflow: hidden;">
  <img src="http://.../images/pool.jpg" width="350" height="263" 
    border="0" style="display:block;">
  </div>
<div class="car-thumb" style="max-height:0px;height:0px;overflow:hidden;">
  <img src="http://.../images/thumb-balcony.jpg">
</div>
  <div class="car-img" style="max-height:0px;height:0px;overflow:hidden;">
  <img src="http://.../images/balcony.jpg" width="350" height="263" 
  border="0" style="display:block;">
  </div>
<!--<![endif]-->

 <div class="car-img">
 <a href="http://.../link">
  <img src="http://.../images/bed.jpg" width="350" height="263" border="0" 
  alt="Hotel" style="display:block;"></a>
 </div>
</div>

Notice that except for the first thumbnail (the bed) we interleave thumbnails (car-thumb) with their associated images (car-img).

The reason for this is so that when the user taps a thumbnail (activating the :hover pseudo-class), we can trigger the display of the adjacent image using the CSS sibling selector (“+”) (see explanation in this example).

.car-thumb:hover + .car-img {...}

We leave the main image at the bottom instead of adjacent to the first thumbnail to separate the main image from the rest of the interactive content to make it easier to hide. Also it naturally puts the main image on top by default when we stack the images using absolute positioning later.

CSS Styles

Since this version of the carousel will only be enabled on mobile, we’ll wrap the whole CSS within a media query

<style>
 @media screen and (max-device-width: 1024px) {
    div[class].car-cont{
      height:327px !important;
      max-height:327px !important;
    }
    div[class].car-thumb, div[class].car-thumb img
    {
      display: inline-block;
      max-height: none !important;  
      width:87px;
      height:65px !important;
      cursor: pointer;
    }
    div[class].car-img{
      height: auto !important;
      max-height: none !important;
      position: absolute;
      left:0px;
      top: 65px;    
    }
    div[class].car-thumb:hover + .car-img
    {
      z-index:2;
    }
}
</style>

Here’s what’s going on:

Firstly, we increase the height of the container to accommodate the thumbnails.

div[class].car-cont{
  height:327px !important;
  max-height:327px !important;
}

Then, we set the height and width of the thumbnails (car-thumb) as well as set the display to “inline-block”, allowing the thumbnails to stack left to right.

div[class].car-thumb, div[class].car-thumb img
{
  display: inline-block;
  max-height: none !important;  
  width:87px;
  height:65px;
}

Then we set the position of the images to absolute and position them below the thumbnails. The four images now occupy the same space stacked on top of each other with only the last image (the bed) being visible.

div[class].car-img{
  height: auto !important;
  max-height: none !important;
  position: absolute;
  left:0px;
  top: 65px;    
}

Finally, we use the sibling selector to shift the z-index of an image adjacent to the thumbnail up a notch when the user taps on it so it appears above the main image.

div[class].car-thumb:hover + .car-img
{
  z-index:2;
}

Takeaway

This example works on the iPhone and Android (2.3 and 4.0) native email clients. However, mobile app and mobile web clients of Yahoo! Mail, Outlook.com or Gmail will only display the main image without the thumbnails.

As you can see building an image carousel for mobile email is pretty straightforward. To make the carousel work for web clients and Outlook 2003, we’ll have to work a little harder.

Click here to read Part 2…