扩展帮助中心文章中的图像
不幸的是，ZenDesk帮助中心本身亚博不允许您将图像扩展大小并显示在灯箱弹出框中。然而，提供这个功能并不困难，只需要少量的工作。
Fancybox是一个JavaScript工具，允许您在灯箱弹出框中显示图像。使用这个工具的过程比以往任何时候都容易，因为从版本3开始，您可以直接链接到托管文件。这使得在ZenDesk中使用它就像四个步骤一样亚博简单:
1.转到主题的代码编辑器。要做到这一点，请访问设置，将鼠标悬停在主题上并单击查看主题，点击“…”在Live旁边，点击编辑代码，然后在左列中选择需要编辑的文件。
2.将链接添加到document_head中的fancybox代码。哈佛商学院(该文件的底部很好):
https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css" / >
< script src = "https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js " > < /脚本>
3.将以下代码添加到script.js文件中，就在结束符"});"的正上方。你可以改变“。第一行中的“fanybox”可以使用不同的类名，或者删除“。fanybox”，使您的所有图像显示在弹出时点击。
$('。article-body img.fancybox”)。On ('click'， function() {
美元.fancybox.open ([
{
$(this).attr(" SRC ")，
选项:{};
}，
]);
}）;
这段代码的位置很重要。请确保在结束括号和圆括号之前包含它，以便可以正确加载它。
4.在本文中，使用图像加载器或通过粘贴来添加图像。
5.单击菜单栏中的Source Code按钮，打开HTML视图弹出。
6.添加类= " fancybox "(或您选择的类名)在您喜欢的任何图像上的HTML代码中。
7.关闭HTML视图弹出窗口并保存页面。
重要的是:确保想要在FancyBox中显示的图像都足够大，以使弹出框有用。我发现这对于应用程序截图来说是最有意义的。
-----------------------
20年3月4日更新:正如Robert Holm在下面提到的，如果你在使用这里描述的fancybox的方法时遇到了麻烦，你可能想要检查一下这里有详细的说明。
-
Be-a-u-tiful !谢谢你提供的这个很棒的图片提示!
-
我喜欢这个解决方案，正是我们需要的!
-
嗨,伊娃!我很高兴它对你起作用了!
-
有人能告诉我我哪里做错了吗?我自己也弄不明白。
我要用它来拍hc上的所有照片 -
Marco，一定要把脚本添加到文件的底部，在结束符"});"之前
-
所以你的意思是这样的:[这不起作用:]< imgsrc="//www.ying8.net/support/hc/user_images/NcbcHRy29PxRtn4s2guIFg.png">
-
我不确定，帮助类隐藏功能，你有那里在最后是正确编写。尝试将Images功能移到上面，看看是否有帮助。如果是这样，那么需要修复Help Classes函数。
否则，代码中就会发生其他事情。你可以尝试使用JavaScript验证器来检查问题:http://esprima.org/demo/validate.html -
我让它工作:)。这其实更简单。
谢谢你的帮助 -
我很高兴你修好了，马可!谢谢你的帮助，约书亚。：）
-
如果你想在你的社区帖子中包含这个，你应该把这个添加到“scripts.js”:
//fancybox图像在社区放大
$('。post请求img.fancybox”)。On ('click'， function() {
美元.fancybox.open ([
{
$(this).attr(" SRC ")，
选项:{};
}，
]);
}）;你也可以排除。fanybox”，使您的所有图像显示在弹出时，点击在您的社区帖子。
-
效果很好。谢谢。我花了一点时间来排除故障，以确保它能正常工作。也许在本指南中添加一节或一个示例文件可能会更好。
-
有办法吗将此函数锁定为图像文件类型？
我们的目标是在涉及到图标或svg资产时避免这种情况。
或者，至少能够从使用此函数中删除特定图像。很多谢谢!
-
Chris，如果你将它设置为只应用于具有类名的标题，那么它将不会应用于其他任何内容。我相信你可以在JS中找到一种方法来设置排除，但使用类名包含会更容易。
-
谢谢你，约书亚，听起来不错。虽然我不知道该怎么做……欢迎提出任何建议:)
-
Chris，按照上面的说明设置JS并使用你在图片中定义的类名。
-
谢谢，当我最初实现它时，我不知何故错过了这一点。
-
@JoshuaTallent是否有机会使用你提到的类，但所有图像都适用，除了特定的几个将有一个类定义?
换句话说，我希望我所有的图像都利用缩放功能，除了一些我将使用类名来定义它们。
任何帮助或建议将非常感激! -
Chris，你可以通过改变JS中的这一行来让所有的图片都可以缩放:
$('。article-body img.fancybox”)。On ('click'， function() {这个
$('。article-body img”)。On ('click'， function() {(去掉“。fanybox”)。
只要意识到这将适用于所有图像，包括小图像。
-
再次感谢约书亚，这是我目前的情况，按照你最初的指示。
然而，我希望有一种方法在我的文章中分配特定的图像(即一个小图标)，而不是有这个功能。我不想浏览400篇文章并分配我想使用此功能的图像，而是更容易编辑我不想使用缩放功能的少数图像。
再次感谢大家的支持! -
您必须对图像进行某种描述来分配样式。如果你没有特定的东西来定义哪个图像是哪个，那么就没有办法做你想做的事情。对不起!
-
当然，我在考虑使用类，但反过来，只有那些与类分配将没有缩放功能。好吧，不管怎样，看来没有别的办法了。谢谢你的帮助，约书亚!
-
干得好，约书亚。工作好了!
我怎么能添加悬停说明或什么东西说按esc关闭? -
你好@雅克·范伦斯堡，
你可以使用标题为了得到这样的东西。这里有几个链接供参考，你可能会想看看这些:
- http://fancyapps.com/fancybox/#docs
- https://stackoverflow.com/questions/13176738/adding-a-title-to-fancy-box
谢谢
-
谢谢。我快速看了一下，看到了一些应该工作的选项:)
-
嗨，我开不了这个。我按照指示去做，但运气不好。什么好主意吗?谢谢你！< imgsrc="//www.ying8.net/support/hc/user_images/WBgiF_CCstOvTPqiZYcKLQ.png">
-
埃里克,
在要展开的图像上是否有类名?
< img类= " fancybox "Src ="image.png" alt="alt text">
-
嗨,约书亚,
感谢您的及时回复。不，图片上没有类名。一定是这样。如何将类名放在图像上?我要更改文件名吗?或者这些图像需要通过CSS添加;不是文章中的图片上传器?再次感谢。
-
更新:我使用所见即所得编辑器中的源代码按钮向每个图像添加类名，但是，它没有做任何事情。想法吗?
-
埃里克,
在使用本文中的上传器加载图像之后，单击编辑器右侧的Source Code按钮。
在Code弹出窗口中，将类名添加到图像标记中，如上所示。你不需要做其他任何事。
好运！
约书亚
-
嗨,杰克,
我做了这个，但它没有任何作用。还有其他想法吗?
请登录留下评论。
62条评论