【问题标题】: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]”。有什么建议吗?
    猜你喜欢
    • 1970-01-01
    • 2014-09-09
    • 1970-01-01
    • 2013-12-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2010-10-25
    • 2011-10-02
    相关资源
    最近更新 更多