How to Create an Image Carousel for Email – Part 2 [Web & Desktop]
In Part 1 we saw how we can create a thumbnail driven image carousel for mobile email. This article will go over how to add support for Web & Desktop email clients such as Yahoo! Mail, Outlook.com and Outlook 2003.
Unlike the mobile version, supporting web and desktop is a bit more involved, so if you just want to see an example, enter your email below to send yourself an example or skip to the end for the complete code.
Lack of absolute positioning on Web Clients and Outlook
One of the main challenges when attempting advanced layouts on webmail and desktop clients are that certain kinds of CSS are not supported. A key style that we used in the mobile example that isn’t available to us is absolute positioning (position: absolute).
Absolute positioning allows us to position elements at arbitrary locations in the document. We used that in the mobile example to stack the images on top of each other at the same location and to display them by simply moving images on top of each other using z-index.
In the case of web and desktop clients we would need to find alternatives.
Pushing elements out of the container
In this example although the order of our HTML elements (thumbnails and images) would remain the same, instead of stacking we would simply “push” the elements to the right out of the container (the <DIV> that holds the elements) when the user hovers over a thumbnail. This works by setting the dimensions of the <DIV> container large enough to only accommodate the thumbnails and a single picture and then set the container’s “overflow” property to hidden so that any element that exceeds the dimensions of the container will be hidden.
In our markup we have the elements in this order:
[thumbnail 1]
[thumbnail 2]
[image 2 – initially hidden]
[thumbnail 3]
[image 3 – initially hidden]
[thumbnail 4]
[image 4 – initially hidden]
[image 1]
See the animation here to follow along ( <DIV> container is outlined in blue):
Situation #1 – Initial State
When the elements are first displayed, all the thumbnails are displayed horizontally, with image #1 being the first displayed.
Situation #2 – Mouse over on Thumbnails 2,3,4
When the user’s mouse hovers over the second thumbnail, the sibling selector (+) is activated and the second image becomes visible. This causes the elements to the right of the image to be pushed out of the container including thumbnails 3 and 4.
This same example happens when thumbnails 3 and 4 are moused over. As you can see the first image is always displayed but because it has been pushed out of the container, it is not visible.
Thumbnail pictures as background
If thumbnails 3 and 4 are pushed out of the container when the user hovers the mouse over thumbnail 2, how do we keep thumbnails 3 and 4 visible?
Instead of making the thumbnail pictures as individual elements, we place all four next to each other as a single image in the background. We create four “virtual thumbnails” that appear on top of the respective thumbnail images. These virtual thumbnails are just <DIV> elements that contain an image that is transparent. So when the virtual thumbnails are pushed out of the container, the thumbnail pictures are still visible.
This is where the main difference between the original carousel for mobile and this example; web and desktop use.
Outlook 2003
As a final note, this also surprisingly works in Outlook 2003 – as long as you supply a valid doctype (the stuff that appears before the <html> tag for example:<!DOCTYPE html …>
Leaving out the doctype will display the carousel on Outlook 2003, but it will not respond to :hover events.
Final Markup
So here’s the final markup of the image carousel that supports both mobile and non-mobile.
<style>
.car-cont{
height:327px !important;
max-height:327px !important;
}
.car-img{
max-height: none !important;
width:auto !important;
height: auto !important;
display: none;
}
.car-img-1{
clear:left;
display:block;
}
.car-thumb, .car-thumb img
{
display: inline-block;
float: left;
max-height: none !important;
width:87px;
height:65px !important;
cursor: pointer;
}
.car-thumb:hover + .car-img
{
clear:both;
display:block !important;
}
}
@media screen and (max-device-width: 1024px) {
div[class].car-img{
position: absolute;
left:0px;
top: 65px;
}
div[class].car-thumb:hover + .car-img
{
z-index:2;
}
</style>
<table cellpadding=0 border=0 cellspacing=0 style="border-spacing:0px;border-collapse: collapse;">
<tr><td background="https://freshinbox.com/examples/carousel/images/thumbs-background.jpg">
<div class="car-cont" style="width:350px;height:263px;max-height:263px;overflow:hidden;position:relative;">
<div style="mso-hide:all;">
<div class="car-thumb" style="max-height:0px;height:0px;overflow:hidden;"><img src="https://freshinbox.com/examples/carousel/images/blank.gif"></div>
<div class="car-thumb" style="max-height:0px;height:0px;overflow:hidden;"><img src="https://freshinbox.com/examples/carousel/images/blank.gif"></div>
<div class="car-img" style="max-height:0px;height:0px;overflow:hidden;"><img src="https://freshinbox.com/examples/carousel/images/i-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="https://freshinbox.com/examples/carousel/images/blank.gif"></div>
<div class="car-img" style="max-height:0px;height:0px;overflow:hidden;"><img src="https://freshinbox.com/examples/carousel/images/i-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="https://freshinbox.com/examples/carousel/images/blank.gif"></div>
<div class="car-img" style="max-height:0px;height:0px;overflow:hidden;"><img src="https://freshinbox.com/examples/carousel/images/i-balcony.jpg" width="350" height="263" border="0" style="display:block;"></div>
</div>
<div class="car-img car-img-1"><a href="http://www.omnihotels.com/FindAHotel/AmeliaIsland.aspx"><img src="https://freshinbox.com/examples/carousel/images/i-bed.jpg" width="350" height="263" border="0" alt="Hotel" style="display:block;"></a></div>
</div>
</td></tr></table>
Recap
1) Building a carousel that works just on mobile is a lot simpler.
2) With some extra work, you can build a carousel that also works in Yahoo! Mail, Outlook.com, AOL and Outlook 2003
Now if only Gmail would hurry up and support embedded style tags, more users would be able to benefit from your interactive email efforts!