0

How can I set up the download link in fancybox-3 in that way, that it will not link to the displayed image but to a hi res-version of the displayed image?

How can I set this up? Any help here? (I know there must be something with 'afterload' and a 'download attribute'.) Thx!

Raul76
  • 9
  • 3

1 Answers1

0

Simply use afterShow callback and then tweak the download link to suit your needs, for example:

$('[data-fancybox="images"]').fancybox({
  buttons : [ 
    'download',
    'close'
  ],
  afterShow : function(instance, current) {
    var src =  current.src.replace('1500x1000', '5000x2000');

    console.info('current.src: ' + current.src + '; download src: ' + src);

    $("[data-fancybox-download]").attr('href', src);
  }
});

Demo - https://codepen.io/anon/pen/EdGNdX?editors=1010

Janis
  • 8,593
  • 1
  • 21
  • 27
  • works perfectly, thx! however, is there a way to directly start the download of the image after clicking on the download button? Its a bit a pitty, that one has to press the go-back-button in the browser to get back to the Lightbox after downloading an image. – Raul76 Oct 28 '18 at 16:52
  • If that would be easy.. See https://stackoverflow.com/questions/17527713/force-browser-to-download-image-files-on-click and others – Janis Oct 28 '18 at 18:15
  • Ok, I see ;-) Coming back to your solution above: What do you do, if you have the 5000x2000 version of the image on a different server (e.g. Dropbox). Then, every image must have an individual link to the 5000x2000 version. That means, every image should have 3 links. Would that be possible? (To download the 5000x2000 version from dropbox and replace the 0 at the end of the link with 1? That would start the download directly, wright?) – Raul76 Oct 31 '18 at 15:30
  • Well, that is up to you and your imagination. You could, for example, add new attribute for each image link and use that for download link or you could add custom click event for download link and use js to customize download url. – Janis Oct 31 '18 at 16:15