【问题标题】:How to add image slider in email newsletter?如何在电子邮件通讯中添加图像滑块?
【发布时间】:2015-08-30 11:27:57
【问题描述】:

我使用mailchimp创建了电子邮件通讯

现在我想添加响应式设计的图像滑块,

但我已经在网上搜索了很多..

一些在线文档说无法在电子邮件通讯中添加图像滑块。

比如这个link告诉。,不可能的。

那么,我可以知道,实现这一目标的确切链接是什么?

任何帮助将不胜感激,

提前致谢。

【问题讨论】:

  • Imageslider 需要运行 JS,无法在电子邮件中包含内联 js,因为该电子邮件将被大多数电子邮件提供商屏蔽。
  • 不,我认为没有。

标签: javascript jquery html email newsletter


【解决方案1】:

很遗憾,你做不到。 CSS3 滑块和 JS 滑块都不能在 HTML 电子邮件中使用。

电子邮件通讯中的 NO-JS。证明?

在您的电子邮件通讯的<head> 内只需插入:

<script>alert("JS WORKS! ...not");</script>

发送那封电子邮件 - 这就是您的电子邮件客户端不支持 JS 的证明


GIF 动画图片

您最终可以使用 .gif 动画。在 Outlook 2007 中不起作用 - 但至少它会显示第一帧。
不要夸大 .gif 动画,因为使用的帧越多,文件大小就越大。
另外不要忘记您调色板有限 (256) 所以三思而后行:

您不希望用户等待 900KB 的 .gif 图片。


JPG 静态图片

我的建议是创建一个漂亮的类似滑块的 .jpg 图像
将其链接到您的您展示产品的网站。

<a href="http://example.com/products"><img src="http://example.com/nl/img/img.jpg"></a>

这张吸引人的图片只有 45KB。每个电子邮件客户端都会很乐意在不将您列入黑名单的情况下提供此类图像。
此外,请查看您的 MailChimp 点击率。应该会带来令人惊讶的结果!

【讨论】:

  • @sandhu,您可以在几分钟内在 Photoshop 中轻松创建一个 .gif 图像,就像一个滑块画廊 :)
  • @sandhu 你不需要文档证明。在您的文档的&lt;head&gt; 中创建一个仅包含&lt;script&gt;alert("Hello Proof!")&lt;/script&gt; 的电子邮件。它不会运行,你永远不会看到警报!原因 JS 不会在电子邮件客户端上运行。所以 JS 画廊也不会运行。希望这足以证明。您可以在报告中提及这一点。 CSS3 支持有限。所以你也无法使用 CSS3 transition 实现画廊。
  • @sandhu 解释什么?如何制作.gif动画?这是我答案中的所有内容(自第一篇文章以来我已经对其进行了编辑)。阅读它。
  • @sandhu 一个静态的非动画 .jpg 图像,看起来像一个滑块!使用左右按钮,一个号召性用语按钮......所以基本上是一个看起来像滑块的静态图像。用户会尝试点击它——它会被重定向到您的网站。
  • @sandhu campaignmonitor.com/blog/post/3219/do-iframes-work-in-email 使用谷歌。 Campaign Monitor 在回答各种电子邮件通讯问题方面做得非常出色。它们提供您需要的所有信息。
【解决方案2】:

Imageslider 需要运行 JS,在电子邮件中包含内联 js 是不可能的,因为该电子邮件将被大多数电子邮件提供商阻止。

但是您可以使用 GIF 图片:https://litmus.com/blog/a-guide-to-animated-gifs-in-email

【讨论】:

  • @sandhu 您无法在电子邮件中添加图像滑块。 GIF 图片是您拥有的最佳选择。
  • 多张图片相继出现
  • 取决于你所说的“移动”
  • @sandhu 没有 gif 图像不是滑块。如果您查看我给您的链接,您就会了解 gif 图像是什么,如果您向下滚动,您会找到一个示例。
【解决方案3】:

因此,像上面其他人所说的那样,无法在电子邮件中使用 javascript。这有很多安全原因...

话虽如此,您绝对可以使用复选框/收音机 hack 实现图像滑块或更准确地说是具有纯 html 和 css 的图像轮播。然而,支持不仅限于电子邮件客户端,更明显的是受到电子邮件服务的限制,例如 mailchimp,它支持发送电子邮件,因为 mailchimp Form elements including checkbox, radio and labels are stripped from emails...

这里说的是一个例子:

http://freshinbox.com/resources/tools/carousel/

【讨论】:

    猜你喜欢
    • 2013-02-28
    • 1970-01-01
    • 2019-07-06
    • 1970-01-01
    • 2016-09-30
    • 1970-01-01
    • 2012-06-23
    • 2010-11-17
    • 2011-07-11
    相关资源
    最近更新 更多