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.
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.) A working WordPress plugin--but I'm not using WordPress
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.) 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
})))
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
later in the updateDetails function.