{"id":435,"date":"2014-03-24T08:57:49","date_gmt":"2014-03-24T08:57:49","guid":{"rendered":"http:\/\/freshinbox.com\/blog\/?p=435"},"modified":"2015-09-02T10:58:35","modified_gmt":"2015-09-02T10:58:35","slug":"how-to-create-an-image-carousel-for-email-part-2","status":"publish","type":"post","link":"https:\/\/freshinbox.com\/blog\/how-to-create-an-image-carousel-for-email-part-2\/","title":{"rendered":"How to Create an Image Carousel for Email &#8211; Part 2 [Web &#038; Desktop]"},"content":{"rendered":"<p>In <a href=\"https:\/\/freshinbox.com\/blog\/image-carousel-in-email-part-1-mobile\/\">Part 1<\/a> 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 &#038; Desktop email clients such as Yahoo! Mail, Outlook.com and Outlook 2003.<\/p>\n<div style=\"max-width:400px;margin:0 auto;padding:10px;border:1px solid #888888;text-align:center;\">\n<b>Try out the <a href=\"https:\/\/freshinbox.com\/resources\/tools\/carousel\/\">Image Carousel for Email Builder<\/a><\/b><br \/>\nThe tool uses a slightly <a href=\"https:\/\/freshinbox.com\/blog\/image-carousel-for-email-tool\/\">different technique<\/a>\n<\/div>\n<p><BR><\/p>\n<style>\n.yfix{}\n@media print,screen {\n  .yfix{\n    display: block;\n  }\n  .car-cont{\n    height:327px !important;\n    max-height:327px !important;\n  }\n  .car-img{\n    max-height: none !important;\n    width:auto !important;\n    height: auto !important;  \n    display: none;\n  }\n  .car-img-1{\n    clear:left;\n    display:block;\n  }\n  .car-thumb, .car-thumb img\n  {\n    display: inline-block;\n    float: left;  \n    max-height: none !important;  \n    width:87px;\n    height:65px !important;\n    cursor: pointer;\n  }\n  .car-thumb:hover + .car-img\n  {\n    clear:both;\n    display:block !important;\n  }\n}\n@media screen and (max-device-width: 1024px) {\n  div[class].car-img{\n    position: absolute;\n    left:0px;\n    top: 65px;    \n  }\n  div[class].car-thumb:hover + .car-img\n  {\n    z-index:2;\n  }\n}\n<\/style>\n<table cellpadding=0 border=0 cellspacing=0 style=\"border-spacing:0px;border-collapse: collapse;width:350px;\">\n<tr>\n<td background=\"https:\/\/freshinbox.com\/examples\/carousel\/images\/thumbs-background.jpg\" style=\"padding:0px;\">\n<div class=\"car-cont\" style=\"width:350px;height:263px;max-height:263px;overflow:hidden;position:relative;\">\n<div style=\"mso-hide:all;\">\n<div class=\"car-thumb\" style=\"max-height:0px;height:0px;overflow:hidden;\"><img decoding=\"async\" src=\"https:\/\/freshinbox.com\/examples\/carousel\/images\/blank.gif\"><\/div>\n<div class=\"car-thumb\" style=\"max-height:0px;height:0px;overflow:hidden;\"><img decoding=\"async\" src=\"https:\/\/freshinbox.com\/examples\/carousel\/images\/blank.gif\"><\/div>\n<div class=\"car-img\" style=\"max-height:0px;height:0px;overflow:hidden;\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/freshinbox.com\/examples\/carousel\/images\/i-table.jpg\" width=\"350\" height=\"263\" border=\"0\" style=\"display:block;\"><\/div>\n<div class=\"car-thumb\" style=\"max-height:0px;height:0px;overflow:hidden;\"><img decoding=\"async\" src=\"https:\/\/freshinbox.com\/examples\/carousel\/images\/blank.gif\"><\/div>\n<div class=\"car-img\" style=\"max-height:0px;height:0px;overflow:hidden;\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/freshinbox.com\/examples\/carousel\/images\/i-pool.jpg\" width=\"350\" height=\"263\" border=\"0\" style=\"display:block;\"><\/div>\n<div class=\"car-thumb\" style=\"max-height:0px;height:0px;overflow:hidden;\"><img decoding=\"async\" src=\"https:\/\/freshinbox.com\/examples\/carousel\/images\/blank.gif\"><\/div>\n<div class=\"car-img\" style=\"max-height:0px;height:0px;overflow:hidden;\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/freshinbox.com\/examples\/carousel\/images\/i-balcony.jpg\" width=\"350\" height=\"263\" border=\"0\" style=\"display:block;\"><\/div>\n<\/div>\n<div class=\"car-img car-img-1\"><a href=\"http:\/\/www.omnihotels.com\/FindAHotel\/AmeliaIsland.aspx\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/freshinbox.com\/examples\/carousel\/images\/i-bed.jpg\" width=\"350\" height=\"263\" border=\"0\" alt=\"Hotel\" style=\"display:block;\"><\/a><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/table>\n<p>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.<\/p>\n<div id=\"email-me\" style=\"margin-left:20px;\">\n  <input type=email id=\"email-me-email\" placeholder=\"Email address\"> <input id=\"email-me-btn\" type=button value=\"Email Me This Example\"><BR>\n<\/div>\n<p><BR><BR><\/p>\n<h4>Lack of absolute positioning on Web Clients and Outlook<\/h4>\n<p>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&#8217;t available to us is absolute positioning (position: absolute).<\/p>\n<p>Absolute positioning allows us to position elements at arbitrary locations in the document. We used that in the <a href=\"https:\/\/freshinbox.com\/blog\/image-carousel-in-email-part-1-mobile\/\">mobile example<\/a> 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.<\/p>\n<p>In the case of web and desktop clients we would need to find alternatives.<BR><BR><\/p>\n<h4>Pushing elements out of the container<\/h4>\n<p>In this example although the order of our HTML elements (thumbnails and images) would remain the same, instead of stacking we would simply &#8220;push&#8221; the elements to the right out of the container (the &lt;DIV&gt; that holds the elements) when the user hovers over a thumbnail. This works by setting the dimensions of the  &lt;DIV&gt; container large enough to only accommodate the thumbnails and a single picture and then set the container&#8217;s &#8220;overflow&#8221; property to hidden so that any element that exceeds the dimensions of the container will be hidden.<\/p>\n<p>In our markup we have the elements in this order:<br \/>\n[thumbnail 1]<br \/>\n[thumbnail 2]<br \/>\n[image 2 &#8211; initially hidden]<br \/>\n[thumbnail 3]<br \/>\n[image 3 &#8211; initially hidden]<br \/>\n[thumbnail 4]<br \/>\n[image 4 &#8211; initially hidden]<br \/>\n[image 1]<\/p>\n<p>See the animation here to follow along ( &lt;DIV&gt; container is outlined in blue):<\/p>\n<div style=\"padding: 10px 100px; width: 250px; border:2px solid #aaaaaa;\"><img decoding=\"async\" src=\"https:\/\/freshinbox.com\/blog\/wp-content\/uploads\/2014\/03\/carousel-anim.gif\"><\/div>\n<p><BR><BR><\/p>\n<p><strong>Situation #1 &#8211; Initial State<\/strong><br \/>\nWhen the elements are first displayed, all the thumbnails are displayed horizontally, with image #1 being the first displayed.<\/p>\n<p><strong>Situation #2 &#8211; Mouse over on Thumbnails 2,3,4<br \/>\n<\/strong><br \/>\nWhen the user\u2019s  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.<\/p>\n<p>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.<BR><BR><\/p>\n<h4>Thumbnail pictures as background<\/h4>\n<p>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?<\/p>\n<p>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 &#8220;virtual thumbnails&#8221; that appear on top of the respective thumbnail images. These virtual thumbnails are just &lt;DIV&gt; 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.<\/p>\n<p>This is where the main difference between the original carousel for mobile and this example; web and desktop use.<BR><BR> <\/p>\n<h4>Outlook 2003<\/h4>\n<p>As a final note, this also surprisingly works in Outlook 2003 &#8211; as long as you supply a valid doctype (the stuff that appears before the &lt;html&gt; tag for example:&lt;!DOCTYPE html &#8230;&gt;<\/p>\n<p>Leaving out the doctype will display the carousel on Outlook 2003, but it will not respond to :hover events.<BR><BR><\/p>\n<h4>Final Markup<\/h4>\n<p>So here&#8217;s the final markup of the image carousel that supports both mobile and non-mobile.<\/p>\n<pre class=\"lang:default decode:true \" >&lt;style&gt;\r\n  .car-cont{\r\n    height:327px !important;\r\n    max-height:327px !important;\r\n  }\r\n  .car-img{\r\n    max-height: none !important;\r\n    width:auto !important;\r\n    height: auto !important;  \r\n    display: none;\r\n  }\r\n  .car-img-1{\r\n    clear:left;\r\n    display:block;\r\n  }\r\n  .car-thumb, .car-thumb img\r\n  {\r\n    display: inline-block;\r\n    float: left;  \r\n    max-height: none !important;  \r\n    width:87px;\r\n    height:65px !important;\r\n    cursor: pointer;\r\n  }\r\n  .car-thumb:hover + .car-img\r\n  {\r\n    clear:both;\r\n    display:block !important;\r\n  }\r\n}\r\n&nbsp;@media screen and (max-device-width: 1024px) {\r\n  div[class].car-img{\r\n    position: absolute;\r\n    left:0px;\r\n    top: 65px;    \r\n  }\r\n  div[class].car-thumb:hover + .car-img\r\n  {\r\n    z-index:2;\r\n  }\r\n&lt;\/style&gt;\r\n&lt;table cellpadding=0 border=0 cellspacing=0 style=\"border-spacing:0px;border-collapse: collapse;\"&gt;\r\n&lt;tr&gt;&lt;td background=\"https:\/\/freshinbox.com\/examples\/carousel\/images\/thumbs-background.jpg\"&gt;\r\n&lt;div class=\"car-cont\" style=\"width:350px;height:263px;max-height:263px;overflow:hidden;position:relative;\"&gt;\r\n&lt;div style=\"mso-hide:all;\"&gt;\r\n&lt;div class=\"car-thumb\" style=\"max-height:0px;height:0px;overflow:hidden;\"&gt;&lt;img src=\"https:\/\/freshinbox.com\/examples\/carousel\/images\/blank.gif\"&gt;&lt;\/div&gt;\r\n&lt;div class=\"car-thumb\" style=\"max-height:0px;height:0px;overflow:hidden;\"&gt;&lt;img src=\"https:\/\/freshinbox.com\/examples\/carousel\/images\/blank.gif\"&gt;&lt;\/div&gt;\r\n&lt;div class=\"car-img\" style=\"max-height:0px;height:0px;overflow:hidden;\"&gt;&lt;img src=\"https:\/\/freshinbox.com\/examples\/carousel\/images\/i-table.jpg\" width=\"350\" height=\"263\" border=\"0\" style=\"display:block;\"&gt;&lt;\/div&gt;\r\n&lt;div class=\"car-thumb\" style=\"max-height:0px;height:0px;overflow:hidden;\"&gt;&lt;img src=\"https:\/\/freshinbox.com\/examples\/carousel\/images\/blank.gif\"&gt;&lt;\/div&gt;\r\n&lt;div class=\"car-img\" style=\"max-height:0px;height:0px;overflow:hidden;\"&gt;&lt;img src=\"https:\/\/freshinbox.com\/examples\/carousel\/images\/i-pool.jpg\" width=\"350\" height=\"263\" border=\"0\" style=\"display:block;\"&gt;&lt;\/div&gt;\r\n&lt;div class=\"car-thumb\" style=\"max-height:0px;height:0px;overflow:hidden;\"&gt;&lt;img src=\"https:\/\/freshinbox.com\/examples\/carousel\/images\/blank.gif\"&gt;&lt;\/div&gt;\r\n&lt;div class=\"car-img\" style=\"max-height:0px;height:0px;overflow:hidden;\"&gt;&lt;img src=\"https:\/\/freshinbox.com\/examples\/carousel\/images\/i-balcony.jpg\" width=\"350\" height=\"263\" border=\"0\" style=\"display:block;\"&gt;&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;div class=\"car-img car-img-1\"&gt;&lt;a href=\"http:\/\/www.omnihotels.com\/FindAHotel\/AmeliaIsland.aspx\"&gt;&lt;img src=\"https:\/\/freshinbox.com\/examples\/carousel\/images\/i-bed.jpg\" width=\"350\" height=\"263\" border=\"0\" alt=\"Hotel\" style=\"display:block;\"&gt;&lt;\/a&gt;&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;\/td&gt;&lt;\/tr&gt;&lt;\/table&gt;<\/pre>\n<h4>Recap<\/h4>\n<p>1) Building a carousel that works just on mobile is a lot simpler.<br \/>\n2) With some extra work, you can build a carousel that also works in Yahoo! Mail, Outlook.com, AOL and Outlook 2003<\/p>\n<p>Now if only Gmail would hurry up and support embedded style tags, more users would be able to benefit from your interactive email efforts!<\/p>\n<style>\n#email-me {\n  padding:10px 10px;\n  font-family: \"Lucida Grande\";<\/p>\n<p>}\n#email-me-email {\n  width:170px;\n  height:20px;\n  margin-bottom: 5px;\n  background-color: #FAFCEF;\n  font-size: 14px;\n  padding: 3px 5px;\n  display:inline-block;\n  border-radius:3px;<\/p>\n<p>}\n#email-me-btn {\n  cursor: pointer;\n  font-size: 14px;\n  color: white;\n  text-decoration:none;\n  text-shadow:#555555 0 1px;\n  background-color: #7DC442;\n  padding: 5px 12px;\n  border:1px solid #559621;\n  border-radius: 5px;\n  display:inline-block;<\/p>\n<p>}\n#email-me-btn:hover {\n  background-color: #78D62C;\n}\n#email-me{\n  width: 400px;\n  padding:20px;\n  border:3px solid #888888;\n  border-radius: 5px;\n}\n<\/style>\n<p><BR><\/p>\n<p><script src=\"\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.10.2\/jquery.min.js\"><\/script><br \/>\n<script>\n  var theEmail = null;\n  $(document).ready(function(){\n    $('#email-me-btn').click(function(){\n      theEmail = $('#email-me-email').val();\n      sendEmail(theEmail);\n    });\n    $(\"#email-me-email\").keypress(function(e) {\n      if(e.which == 13) {\n        theEmail = $('#email-me-email').val();        \n        sendEmail(theEmail);\n      }\n    });\n  });\n  var sendEmail = function(emailAddr){\n    if(!emailAddr || emailAddr.length < 12){\n      alert('Please enter an email');\n      return;\n    }\n    $('#email-me-email').val('sending...');\n    $.ajax({\n      url: \"https:\/\/freshinbox.com\/examples\/carousel\/mail_example.php\",\n      data: {\n        email: emailAddr\n      },\n      success: function( data ) {\n        if(data == null || data.indexOf(\"ERROR\") != -1){\n          alert(\"There was a problem sending the email \\n\"+data);\n        }else{\n          alert(\"An email has been sent to \"+emailAddr+\"!\\n (Be sure to check the spam folder just in case)\");          \n        }\n        $('#email-me-email').val('');\n      }\n    });\n  }\n<\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In <a href=\"http:\/\/freshinbox.com\/blog\/image-carousel-in-email-part-1-mobile\/\">Part 1<\/a> 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 &#038; Desktop email clients such as Yahoo! Mail, Outlook.com and Outlook 2003&#8230;<\/p>\n","protected":false},"author":2,"featured_media":385,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[19,28,24,25],"tags":[],"_links":{"self":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts\/435"}],"collection":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/comments?post=435"}],"version-history":[{"count":36,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts\/435\/revisions"}],"predecessor-version":[{"id":775,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts\/435\/revisions\/775"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/media\/385"}],"wp:attachment":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/media?parent=435"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/categories?post=435"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/tags?post=435"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}