在Fancybox中保存图像

Question

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

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

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

Answer 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

中检查“扩展功能”