Latest Comments
  1. akaczka

    FYI: If you need to have multiple carousels in one email. Just change the name of the radio butttons in the 2nd carousel to something different.

    • Justin

      Thanks for the suggestion! I’ve updated the post with this info.

  2. sidney

    A fantasitic tool

  3. john

    Is there a way to make the carousel autoplay/autoswap from one thumbnail to the next and obviously change the main image as well?

    • Justin

      You can do that with CSS animations but it wouldn’t work in Webmail since animations are not supported. You would also need to ensure that the animations pause when the user selects a thumbnail. I have some prototype code and will probably post it up when I get a chance to clean it up.

      • john

        thank you….also I noticed while testing your original code in Yahoo that the thumbnail images stack on top of each other and not side by side

        • Justin

          Hi John what browser were you testing it on?

          • John

            believe it was Chrome

          • John

            now it seems to be working, maybe I did something wrong.

  4. jay

    Hi Justin!

    Your tool works great!! I was wondering if I wanted to add custom styling. How do I manually put the code in for gmail?

    Thanks!

  5. Julia

    I got this working in my browser fine, but when I tried a test email to Gmail (desktop browser gmail, not the mobile app for gmail) it only displayed the static image. I did the sending through MailChimp. Have you come across any problems like this?

    • Justin

      Unfortunately MailChimp looks like the only ESP that strips form elements before sending so you can’t use techniques that use checkboxes or radio elements. However you can still use some of the other examples on the site that uses :hover.

      • Todd

        So glad I just read the comments section, i’ve been pulling my hair out over this for 2 days now! Damn you mailchimp :)

  6. Eric J

    Justin – could you explain the responsive part of this and why you’re using :not and what the hell .inset is?

    Thank you so much for your work!

    • Justin

      Ah that was some superflous code from an earlier experiment. I’ve since removed it from the CSS :)

  7. Courtney Fantinato

    Hi Justin,

    I’ve been playing around with the carousel tool, and noticed that when inlining CSS (in Campaign Monitor), the Yahoo Mail app (iOS) shows the fallback with 2 radio buttons above it. However, if I do not inline the CSS, the fallback appears in the Yahoo Mail app as it should without any radio buttons appearing. Have you run into this at all?

    Thanks!

    • Justin

      Hey Courtney,
      Unfortunately auto-inliners and kinetic email don’t work well together. In this case the inliner probably inlined the style:

      input {
      display:none;
      }

      Yahoo! Mail for some odd reason only respects that in the style block and not inline.
      See http://freshinbox.com/blog/how-to-hide-checkbox-and-radio-in-email/

      • Courtney Fantinato

        Hey Justin,

        Your resource here (http://freshinbox.com/resources/css.php#ymail) says that the Yahoo Mail mobile app allows “display:none” both inline and in style (unlike webmail which is only in style).

        I’m pretty sure as well that Campaign Monitor doesn’t remove the styles it inlines from the tag. So, if it’s still in the style tag, shouldn’t that be respected?

        • Justin

          I discovered two things.
          1) When you turn on the CM inliner, it shifts the “checked” attribute from the end of the input tag to the middle and the Yahoo! Mail App doesn’t like it.
          2) The new app only supports <style> in the body.

          So your quick fix is to add a style in the body with just “input {display:none}”!

          • Courtney Fantinato

            Interesting!! Thanks, I’ll try that!

  8. gnicky_it

    hi justin, is it possible that the thumbs doesn’t work in thunderbird?

    • gnicky_it

      if there’s no solution I suggest to hide the carousel using the class moz-text-html showing the fallback

    • Alex

      Hi gnicky_it, i have the same observation. This carousel is awesome but in thunderbird the thumbs don’t work and I can’t figure out how tomake it show the fallback instead in this client. Do you think you can help me out?

      I read your solution below but i’m not sure how to implement it.

      Many thanks,
      A

      • Justin

        I overlooked the original comment by gnicky_it. Indeed Thunderbird supports checkboxes but you cannot toggle the check state!

        As mentioned by gnicky_it, Thunderbird appends the class “moz-text-html” to the body of the email so you can turn off thumbnails by doing

        .moz-text-html .thumb {
        display:none !important;
        }

  9. Liam

    Hi

    Regarding the Yahoo! mail app: I’ve got the carousel working in the Yahoo app for Android, but not in the iOS version? I’m seeing the carousel, but the thumbnails don’t switch between the different content. (The border of the selected thumbnail DOES change though). Is this a know issue?

    Thanks!

    • Justin

      Apparently Yahoo! made a change that causes labels to not work properly in the Yahoo! Mail iOS app. I’ve updated the code so the thumbnails no longer show up.

  10. M_Raua

    Hi there!!

    I tried using the carousel for email builder, and it looks like it is broken. Will this be fixed soon?

    Thank you,
    M_Raua

    • Justin

      Doh! Its fixed now. Thanks for the heads up :)

      • Email_Newbie

        Hi Justin,

        Do you have any suggestion/tips on having the thumbnails at the top of the email rather than at the bottom. Is it also possible to change the colour of the tab(image) once the user clicks on one of the thumbnails.

        Looking forward to hearing from you!

        Thank you,

        • Justin

          You could take a look at this Tabs for Email example: http://freshinbox.com/blog/interactive-tabs-for-email/ as the “tabs” are at the top. As for changing the color, right now the border of the thumbnail changes when you select it. You should be able to change the color by using the background-color style.

  11. Malli

    How can I put the thumbnails on the top?

  12. Alice Meichi Li

    Great tool! I’m having an issue with the thumbnails not showing up in Yahoo Mail for Internet Explorer — both in Litmus and in the actual browser. Is there a fix for this, or a way to force the Fallback to show up instead?

    • Justin

      Hey Alice, you can make the thumbnails appear in Yahoo! Mail IE by removing the “display:none” style from the thumbnails. However this would make it appear in the Yahoo! Mail app as well and for some reason tapping the thumbnails in the app does nothing.

      Unfortunately I haven’t found a way to make the fallback appear JUST for IE in Yahoo! Mail.

      • Alice Meichi Li

        Thanks Justin, that worked! I just tested it in Yahoo IE & Yahoo App, and the thumbnails not only showed up — but they worked. Perhaps there was a (rare beneficial) update recently!

  13. Donna Galletta

    You also need to include this in the CSS for a Yahoo fix:
    input { display: none; } /*yahoo fix*/

    I also found that I need to adjust the table to work better with a ‘Fab Four technique’ / ‘Hybrid email design’ template. Made table width=”100%” and added some styles there too.

    • Justin

      Yup! The builder tool adds that fix as well :)

  14. Duncan

    Got it all working offline, could see images in inbox preview tool too. However when I upload to Responsys I cant see any images.
    Have you had any experience of this code in that ESP?
    thanks
    Dunc

    • Justin

      Duncan, Responsys’ WYSIWYG tool apparently modifies the code. Use the mode that allows you to paste raw HTML and you should be good.

  15. Ulf

    Hi, when the email is first opened, none of the images load. Only when one image is being clicked, it starts loading it.
    It was literally a copy and paste job that I have done and am unaware why it doesn’t work… Any help is appreciated! Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">