在 Fancybox 中保存图像答案

【问题标题】：Saving images in Fancybox在 Fancybox 中保存图像
【发布时间】：2014-10-11 09:10:24
【问题描述】：

我刚刚切换到使用 Fancybox，因为我想要通过右键单击“将图像另存为”来下载图像的选项。我见过其他网站这样做。但是，在我的网站中，右键单击“图像另存为”的选项只出现在图片的中间部分。当鼠标悬停在图像的左右部分上方时，没有这个选项。

我的问题网站是：http://www.lixiao-art.com/latest.html

这是为什么呢？当鼠标悬停在图像的任何部分上方时，如何显示“将图像另存为”选项？请帮忙。

【问题讨论】：

标签： jquery image fancybox fancybox-2

【解决方案1】：

这是因为默认情况下，当你有一个画廊时，fancybox 使用图像的两侧作为可点击区域来导航到上一个或下一个图像，例如

你有两个选择：

1)。通过添加（包含fancybox css 文件后）此css 规则将导航箭头移到fancybox 图像之外

.fancybox-nav {
    width: 60px;       
}

.fancybox-nav span {
    visibility: visible;
    opacity: 0.5;
}

.fancybox-nav:hover span {
    opacity: 1;
}

.fancybox-next {
    right: -60px;
}

.fancybox-prev {
    left: -60px;
}

然后将此 API 选项添加到您的 fancybox 初始化脚本中

margin : [20, 60, 20, 60]

见JSFIDDLE

2)。通过包含在您的页面中来使用 fancybox 按钮助手（包含在 fancybox 下载中）

<link rel="stylesheet" href="{your path}/helpers/jquery.fancybox-buttons.css" type="text/css" media="screen" />
<script type="text/javascript" src="{your path}/helpers/jquery.fancybox-buttons.js"></script>

然后将这些 API 选项添加到您的脚本中：

modal: true,
helpers: {
    buttons: {}
}

在 Fancybox 的 documentation 检查“扩展功能”

【讨论】：

非常感谢！选项 1 听起来更简单，但哪个是我的 fancybox 初始化脚本？那是以“js”结尾的文件吗？以“js”结尾的文件不止一个。原谅我的无知。
我相信这是我的初始化脚本：
我尝试将它添加到脚本的不同部分，但没有成功。
@lixiao 是的，那是你的初始化脚本。尝试使用jsfiddle.net/Xh3B2 作为参考并注意选项是如何包含在.fancybox({ ...API options ...});中的
谢谢，我查看了您的示例，但仍然不明白我应该在启动脚本的哪个位置添加“margin : [20, 60, 20, 60]”。有什么建议吗？