Download original image

A download link is what I would really love to see implemented in Colorbox as well.
The Lightbox2 module (for D6) also came with this option.
Thanks.

subscribe.

A more general use could be to give a role the option to set a link/s with different behaviours: link to "download original image", link to "full node", etc.

Say you build an image gallery vith views (say a grid display of thumbnails) and every thumbnail open in a colorbox. Having a link to the full node in the colorbox can be the right way to send the user to the node he is interested in (full node with your description, exif data, location, etc.)

Totally agree, this option would a great addition. Id like to offer a link to the full node so users can easily leave comments on the media.

Agree... I m too looking for this functionality.

This is possible with the Colorbox Views trigger field feature. Not documented I'm afraid but you can do a lot with it.

Just looked in views... Tried to figure it out, and I saw that there is a way to trigger a colorbox, then edit the html that comes up... However, I did not see the resulting colorbox link actually work to see my output html... is there a trick to making the resulting link work? (right now it just links to the node)

subscribe

sub

+1

I would like to see this feature implemented, or maybe some tutorial how to use colorbox with views trigger ?

Any chance it will be implemented as an options? I would love to see it in Colorbox!

I have found a workaround. I have tested it on a project I'm developing and it seems to be working.

1. Unset Colorbox Style

This is done in admin/config/media/colorbox and allows to control the theming of colorbox in your own theme.

2. Copy the styles to your theme

I took the default styles as a model – but it should work with any other Colorbox style. The files I have moved are: colorbox_default_style.css and colorbox_default_style.js plus their corresponding images.

3. Let your theme know about the change

Add these directives into your THEME.info file (changing the pathnames accordingly):

> stylesheets[all][]   = _css/colorbox_default_style.css
> scripts[]               = _js/colorbox_default_style.js

4. Edit the .js file

Here is the more important thing: using this file you can operate inside the Colorbox div. I my case, I know that Colorbox is using an image style (large) and it is loading images from my files directory. Therefore, the src of the image includes styles/large/public while the original file is exactly the same without these three subdirectories.

This is what I have added to the .js, appending a new link to the #cboxCurrent div (where the image counter appears):

    if ($('#cboxLoadedContent > img').attr('src')) {
      var fullHref = $('#cboxLoadedContent > img').attr('src').replace(/styles\/large\/public\//,'');
      var fullLink = $('<a/>');
      fullLink.attr('href', fullHref);
      fullLink.attr('target', 'new');
      fullLink.attr('title', 'Right click to download');
      fullLink.text('Download');
      $('#cboxCurrent').append(" | ");
      $('#cboxCurrent').append(fullLink);
    }

Let me know if this information was useful and if you find any improvements to this idea.

So in other way the code in colorbox_default_style.js (drupal\sites\all\modules\colorbox\styles\default\) should looks like:

(function ($) {

Drupal.behaviors.initColorboxDefaultStyle = {
  attach: function (context, settings) {
    $(document).bind('cbox_complete', function () {
      // Only run if there is a title.
      if ($('#cboxTitle:empty', context).length == false) {
        setTimeout(function () { $('#cboxTitle', context).slideUp() }, 1500);
        $('#cboxLoadedContent img', context).bind('mouseover', function () {
          $('#cboxTitle', context).slideDown();
        });
        $('#cboxOverlay', context).bind('mouseover', function () {
          $('#cboxTitle', context).slideUp();
        });
      }
      else {
        $('#cboxTitle', context).hide();
      }
    });
	if ($('#cboxLoadedContent > img').attr('src')) {
      var fullHref = $('#cboxLoadedContent > img').attr('src').replace(/styles\/large\/public\//,'');
      var fullLink = $('<a/>');
      fullLink.attr('href', fullHref);
      fullLink.attr('target', 'new');
      fullLink.attr('title', 'Right click to download');
      fullLink.text('Download');
      $('#cboxCurrent').append(" | ");
      $('#cboxCurrent').append(fullLink);
    }
  }
};



})(jQuery);

It's working very nice! Thanks! I hope it soon will be committed as an additional option in Colorbox.

It could however download picture as a SAVE AS. Again good work!

Good to hear that!

I would say that styles/large/public is not an universal value. You could have configured Colorbox to open another style and the path will be different… It could be easy to add this as a variable value and then it will be used in any configuration scenario.

I think that there are at least two missing things in this idea before committing to the Colorbox module:

1. a config option to check | uncheck if you want this link
2. a variable passed with the selected style value

From colorbox FAQ

$('a.colorbox').colorbox({title:function () {
    return "To view full size, " + "click here!".link(this.href);
}});

Cheers

I have seen that. Actually, to find a solution I have to understand a bit the logic of Colorbox more than the logic of the Colorbox module.

The point is that in some cases the reference to this.href is not what we attempt to have as this is pointing to the downsized image (in relation to Image Styles) and not to the original uploaded file.

As I have said: what I proposed is not a universal fit but it could help others in finding some their own ways.

All depends on the display settings of the image field for that particular node type... if you choose Colorbox: linked to orginal image then link.href will point to the original image yes... but there are more options :)

Cheers

True. But I have a situation with 3 images involved:

• a square thumbnail (96 x 96 px)
• a preview image (less than 1024 x 768 px)
• a high res image (the original upload)

The thumbnail is linked to the big size image. There I need a link to download the original hi res image.

You guys should work together to input this as an additional option in Colorbox. To bad I don't have programing skills.

Better solution #13

@hop Could you create a patch instead of a zip file. Then it is easier to review.

subscribe.

@robray Please use the green follow button instead of creating a subscribe comment.

#15 should be the direction. If you have private image and public is not possible to work with #13.

Can you say more?I don't understand detail,I do it step by step,but I don't have a download link.How should I do?Thanks!And is it work in 6.x version?

Did anybody solve this issue - a configuration option (checkbox) to download image - working with private files ?

#14/21 worked for me but not until I added the positioning css for #cboxDownload. Thanks!

What about adding this to the code in #14 for browsers besides IE:

fullLink.attr('download', ' ')

It allows for a direct download, rather than a right click.

Thank you everybody. I'm adding a patch file attached.

@crifi, thanks! I'm gona test it next weekhend.

Hey,

based on the patch from crifi, i created a new patch. This one provides a option in the backend to activate and deactivate the icon in the default colorbox theme.
I have only implemented it for now for the default theme, feel free to extend it.

I recreated the patch, now anything need is inside ite.

Ah i missed the that the issue was still on 7.x-1.x branch, I wrote my patch for the latest dev of 7.x-2.x.
I update the issue to 7.x-2.x, I hope everyone is fine with that. If a backport is required, just let me know.

The latest version of my patch doesnt work with colorbox galleries, I fixed that in the one attached.

I just tested this patch (1101358-41.patch) against Colorbox 7.28 and it works.
It produces a button beside the close button (only the default theme) when the new option ("Add original image link") in colorbox setting is ticked.

Seems RTBC to me.

Thanks for reviewing, could you then please update the issue status ? :)

I'm sorry I haven't had a chance to test this patch myself (#41), but does it download the original image, or public://large?

edit: (duplicate post)

It opens the original image in a new tab if you click on the icon inside the colorbox.
Or if you rightclick the icon and say "save to..." it downloads it directly.

I have a tabbed page with tabs for Colorbox images and Colorbox YouTube videos (via the YouTube module). The patch worked great with the exception that once the images were viewed in Colorbox, the download icon would appear for the videos and be linked to a previous image. I altered the code and got it working the way I wanted. The following alteration has no great foresight, so I don't know if it belongs in the patch or not. Anyway, here is what I did.

In modules/colorbox/styles/default/colorbox_style.js line 34 I changed this...

if ($('#cboxLoadedContent > img').attr('src')) {
  addLink();
}

to this...

if ($('#cboxLoadedContent > img').attr('src')) {
  addLink();
} else {
  if ($('#cboxDownload').length) {
    $('#cboxDownload').remove();
  }
}

My deepest thanks go to those who have created this patch.

This is a nice addition to the patch I provided, thanks for adding this here!

I added it to the patch file. Please retest and update issue status if it works as expected :)

The last patch dropped the file since it wasn't a git patch. Here is a patch that combines what's in #49 and the image in #41.

@sg88: would you be able to test the patch in #51?

Last patch had whitespace errors. Here is a new updated patch. Since it's a git patch reliant on the repo, and applies to 7.x-2.x, here are some instructions for testing it:

$ cd /tmp
$ wget https://www.drupal.org/files/issues/colorbox_1101358_download_original_image-1101358-53.patch
$ git clone --branch 7.x-2.x http://git.drupal.org/project/colorbox.git
$ cd colorbox
$ git apply /tmp/colorbox_1101358_download_original_image-1101358-53.patch

You will now have this patch applied to the /tmp/colorbox directory and can move this module directory into a working Drupal installation to test the functionality.

Hi, I've applied the patch in #53 to the latest dev (7.x-2.x-dev) - but it doesn't seem to do anything. No additional options on the settings page, nothing extra to set on node manage display page as well. Are there any changes needed in the /libraries directory?

Edit: Applied to 7.2.10, too - same there.

Edit: Found and checked "Link to original image" in the settings, but the link does not show up. Did I miss another setting?

Edit: Found the issue: The download link showed up as blank square, just had to fix the background-image.

Marc

#53 worked for me, thank you.

Since i got a little bit lost when i applied the patch and i got no idea where to find the option i will explain a little bit where to find it:

1 - In the Colorbox module setting -> Change the "Options" to Custom -> After that at the bottom of this section you will find the "download as original image".
2 - Once you applied that, you may not see the button since has no text. Change the js or css to customize it as you wish.

I have modified a bit for the #53 patch and add the direct download attr to the download button with a svg icon.

Hi,

The attached patch is for D8 version.