在Fancybox中保存图像 [英] Saving images in Fancybox

问题描述

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

我的问题网站是：

2）。使用fancybox按钮帮助程序（包含在fancybox下载中）包含在您的页面中

 < link rel =stylesheethref ={your path} /helpers/jquery.fancybox-buttons.csstype =text / cssmedia =screen/> 
< script type =text / javascriptsrc ={your path} /helpers/jquery.fancybox-buttons.js>< / script> 
  

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

  modal：true，
 helpers：{
 buttons：{} 
} 
  

在Fancybox的文档<中检查扩展功能 / a>

I have just switched to using Fancybox because I wanted the option of downloading images by right-clicking on "save image as". I've seen other websites do that. But, in my website, the option of "save image as" on right-clicking only appears in the middle section of the picture. When the mouse hovers above the left and right parts of the image, there is not such an option.

My problem website is: http://www.lixiao-art.com/latest.html

Why is that? and how can I have the "save image as" option shown when the mouse hovers above any part of the image? Please help.

解决方案

This is because when you have a gallery by default fancybox uses both sides of the image as clickable areas to navigate to previous or next images, e.g.

You have two options:

1). Move the navigation arrows outside the fancybox image by adding (after you include the fancybox css file) this css rules

.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;
}

then add this API option to your fancybox initialization script

margin : [20, 60, 20, 60] 

See JSFIDDLE

2). Use the fancybox buttons helpers (included in the fancybox download) by including in your page

<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>

then add these API options to your script:

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

Check for "Extended Functionality" at Fancybox's documentation

这篇关于在Fancybox中保存图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！