灯箱图片下载 [英] Lightbox image download
问题描述
我在几个图库上使用Lightbox 2.我想为用户提供一种在灯箱中查看图片时下载图库中图片的方法.一个下载"按钮将是完美的选择，我将其显示在标题附近.
I am using Lightbox 2 on several image galleries. I would like to provide a way for my users to download the images in the gallery while they are viewing them in the Lightbox. A "Download" button would be perfect, and I picture it down near the caption.
问题是我很讨厌Javascript(该项目是一个不经常使用的内部工具，我自愿将其一起破解.这不是我的专业领域).我已经找到了获得所需功能的一些不错的开始，但是我不知道如何将它们缝在一起.这是我正在查看的内容，我希望获得一些更完整的说明(即，将这些代码行...插入此行之后...在lightbox.js中).
The problem is that I suck at Javascript (this project is an internal tool used infrequently, and I volunteered to hack it together. This isn't my area of expertise). I have found some pretty good starts to getting the feature I want, but I don't know how to sew them together. Here is what I am looking at, and I would appreciate some more complete instructions (i.e. insert these lines of code...after this line...in lightbox.js).
我发现但无法利用的东西
What I've found but can't make use of:
1.)可以正常工作的WordPress插件-但我没有使用WordPress
1.) A working WordPress plugin--but I'm not using WordPress
此处，您可以找到作为WordPress插件提供的Lightbox的改进版本. 本网站使用它(查看运动中孩子们的照片，捕捉套装).我认为他已完美地插入了下载"链接，但我不希望将其标记更改为可与WordPress插件配合使用.我想在Lightbox 2模式下使用data-lightbox.
Here you can find a modded version of Lightbox offered as a WordPress plugin. This site uses it (look at the pictures of the kids in the motion-capture suits). I think the Download link he has inserted it perfect, but I would rather not change my markup to work with a WordPress plugin. I want to follow the Lightbox 2 pattern with data-lightbox.
2.)我不明白的这段代码.它提供了神秘的指令来修改lightbox.js文件".但是在哪里?:
2.) This snippet that I do not understand. It was provided with the cryptic instruction to "modify the lightbox.js file." But where?:
$('<div/>', {
"class": 'lb-saveContainer'
}).append($('<a/>', {
"href": '',
"target":"_blank"
}).append($('<img/>', {
src: this.options.fileSaveImage
})))
$('<div/>', {
"class": 'lb-saveContainer'
}).append($('<a/>', {
"href": '',
"target":"_blank"
}).append($('<img/>', {
src: this.options.fileSaveImage
})))
推荐答案
将下载按钮的标记添加到lightbox使用的模板中.灯箱会劫持插件的所有点击，因此您必须在新标记中添加事件处理程序.使用添加标记的启动功能执行此操作.可以使用
Add your markup for the download button to the template that lightbox uses. Lightbox hijacks all the clicks to the plugin, so you have to add an event handler to your new markup. Do this in the same start function that you added your markup in. You can use
window.open()
在新标签页中打开链接.
to open the link in a new tab.
然后您可以根据以下内容填充链接
Then you can populate the link based on
this.album[this.currentImageIndex].link
稍后在updateDetails函数中.
later in the updateDetails function.
这篇关于灯箱图片下载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
