Lightbox图像下载

Question

我在几个图片库上使用Lightbox 2。我想提供一种方式，让我的用户下载在画廊中的图像，而他们正在光盒中查看它们。一个“下载”按钮将是完美的，我想象它在标题附近。

问题是我不喜欢Javascript (这个项目是一个很少使用的内部工具，我自愿将它合并在一起。)这不是我的专长)。我发现一些很好的开始得到我想要的功能，但我不知道如何把它们缝在一起。下面是我要看的内容，我希望得到一些更完整的说明(即插入code...after this line...in lightbox.js的这些行)。

我发现但不能利用的：

1.)一个正在工作的WordPress插件--但我不使用WordPress

这里，您可以找到作为WordPress插件提供的Lightbox的修改版本。本站使用它(看那些穿着运动捕捉服的孩子们的照片)。我认为下载链接他插入它完美，但我不愿意改变我的标记与WordPress插件工作。我想要遵循Lightbox 2模式与数据-光盒。

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

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

Answer 1

将下载按钮的标记添加到lightbox使用的模板中。Lightbox劫持了插件的所有点击，所以您必须向新标记中添加一个事件处理程序。在添加标记的同一开始函数中执行此操作。您可以使用

window.open()

若要在新选项卡中打开链接，请执行以下操作。

然后，您可以基于

this.album[this.currentImageIndex].link 

稍后在updateDetails函数中。

Answer 2

我知道这是一个古老的邮报，但我花了大量的时间来寻找这个问题的答案。

如果将以下代码添加到lightbox.css的底部。您将能够右键单击该图像并选择“将图片保存为.”

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

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

Answer 3

代码段没有修改文件，但是jQuery在当前div类中将html代码的一部分附加到具有lb-saveContainer类(如果有

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

其中系列的"a“标记是用于lightbox视图的系列，当代码片段运行链接以打开保存图像浏览时，类添加div，为每个"a”添加。