3

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 })))

dodgertodd
  • 33
  • 1
  • 4
  • 1
    Try adding `$('.lb-number').append('Download')` on line [172](https://github.com/lokesh/lightbox2/blob/master/js/lightbox.js#L172)... I didn't try it myself, but this may work. You may need to style it a little differently... By the way, this is a hack... – kentcdodds Jan 06 '14 at 19:41

3 Answers3

1

I know this is an old Post but I spent a good deal of time looking for an answer to this very question.

If you add the following code to the bottom of the lightbox.css. You will be able to right click on the image and select "save picture as..."

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

    .lb-prev, .lb-next {
       pointer-events: auto;
    }
rlgjr
  • 55
  • 9
0

the snippet not modify the file, but jQuery append part of html code in html in currents div class that have class lb-saveContainer set if have

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

where series of "a" tag is the series use for lightbox view , the class add in div ,appned for each "a" when the snippet run the link to open a save image browsing

archetipo
  • 579
  • 4
  • 10
0

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.

Porter Hoskins
  • 571
  • 3
  • 12