Question

我在几个图片库上使用Lightbox 2。我想为我的用户提供一种方法，让他们在灯箱中查看图片时下载图片。 “下载”按钮将是完美的，我将其描绘在标题附近。

问题是我吮吸Javascript（这个项目是一个不经常使用的内部工具，我自愿一起破解它。这不是我的专业领域）。我找到了一些非常好的开始获得我想要的功能，但我不知道如何将它们缝合在一起。这是我正在看的内容，我希望得到一些更完整的说明（即插入这些代码行......在此行之后......在lightbox.js中）。

我发现但无法使用：

1。）一个有效的WordPress插件 - 但我没有使用WordPress

Here您可以找到作为WordPress插件提供的Lightbox的修改版本。 This site使用它（查看动作捕捉服中的孩子们的照片）。我认为他已经完美插入了下载链接，但我宁愿不改变我的标记以使用WordPress插件。我想用数据灯箱跟随Lightbox 2模式。

2。）我不明白这个片段。它提供了“修改lightbox.js文件”的神秘指令。但是在哪里？：

$('<div/>', { "class": 'lb-saveContainer' }).append($('<a/>', { "href": '', "target":"_blank" }).append($('<img/>', { src: this.options.fileSaveImage })))

Answer 1

我知道这是一篇旧帖子，但我花了很多时间寻找这个问题的答案。

如果将以下代码添加到lightbox.css的底部。您可以右键单击图像并选择＆＃34;将图片保存为...＆＃34;

    .lb-nav {
       pointer-events: none;
    }

    .lb-prev, .lb-next {
       pointer-events: auto;
    }

Answer 2

代码片段没有修改文件，但是jQuery在html中附加了部分html代码，当前div类中有类lb-saveContainer集如果有

  div class="lb-saveContainer"
      a href ..... img1  /a
      a href   ....  img2  /a
      .
      a href ...  imgn /a
  /div

其中“a”标签系列是灯箱的系列用途视图，类添加div，为每个“a”应用，当代码片段运行链接打开保存图像浏览时

Answer 3

将下载按钮的标记添加到灯箱使用的模板中。 Lightbox劫持了插件的所有点击，因此您必须为新标记添加事件处理程序。在您添加标记的相同启动功能中执行此操作。您可以使用

window.open()

在新标签页中打开链接。

然后您可以根据

填充链接

this.album[this.currentImageIndex].link

稍后在updateDetails函数中

。

灯箱图片下载

3 个答案: