Hi, is it possible, somehow to show a link in the colorbox to download the original image?

Thank you!

Files: 
CommentFileSizeAuthor
#49 colorbox-download-original-image-1101358-49.patch3.53 KBsg88
PASSED: [[SimpleTest]]: [MySQL] 0 pass(es).
[ View ]
#41 colorbox-download-original-image-1101358-41.patch8.83 KBsg88
PASSED: [[SimpleTest]]: [MySQL] 0 pass(es).
[ View ]
#30 downloadlink-1101358-30.patch1.33 KBcrifi
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch downloadlink-1101358-30.patch. Unable to apply patch. See the log in the details link for more information.
[ View ]
#21 colorbox-download-link.zip9.84 KBhop

Comments

Tino’s picture

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.

hohl’s picture

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

core44’s picture

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.

pumpkinkid’s picture

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

frjo’s picture

Version:7.x-1.0-beta2» 7.x-1.x-dev

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

pumpkinkid’s picture

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)

jbova’s picture

subscribe

kelutrab11’s picture

sub

kerios83’s picture

+1

kelutrab11’s picture

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

chebureque’s picture

+1

batigol’s picture

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

tomgf’s picture

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.

kerios83’s picture

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!

tomgf’s picture

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
Bartezz’s picture

From colorbox FAQ

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

Cheers

tomgf’s picture

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.

Bartezz’s picture

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

tomgf’s picture

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.

kerios83’s picture

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

hop’s picture

StatusFileSize
new9.84 KB

Better solution #13

lsolesen’s picture

Status:Active» Needs work

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

robray’s picture

subscribe.

lsolesen’s picture

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

spacereactor’s picture

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

hui314’s picture

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?

kerios83’s picture

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

tommann’s picture

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

russscot’s picture

Issue summary:View changes

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.

crifi’s picture

StatusFileSize
new1.33 KB
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch downloadlink-1101358-30.patch. Unable to apply patch. See the log in the details link for more information.
[ View ]

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

batigol’s picture

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

sg88’s picture

StatusFileSize
new3.51 KB
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch colorbox-download-original-image-1101358-32.patch. Unable to apply patch. See the log in the details link for more information.
[ View ]

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.

sg88’s picture

Status:Needs work» Needs review

The last submitted patch, 30: downloadlink-1101358-30.patch, failed testing.

Status:Needs review» Needs work

The last submitted patch, 32: colorbox-download-original-image-1101358-32.patch, failed testing.

sg88’s picture

StatusFileSize
new8.71 KB
PASSED: [[SimpleTest]]: [MySQL] 0 pass(es).
[ View ]

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

sg88’s picture

Status:Needs work» Needs review

Status:Needs review» Needs work

The last submitted patch, 36: colorbox-download-orignal-image-1101358-36.patch, failed testing.

sg88’s picture

Version:7.x-1.x-dev» 7.x-2.x-dev
Status:Needs work» Needs review

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.

sg88’s picture

StatusFileSize
new8.83 KB
PASSED: [[SimpleTest]]: [MySQL] 0 pass(es).
[ View ]

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

Lostandfound’s picture

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.

sg88’s picture

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

Lostandfound’s picture

Status:Needs review» Reviewed & tested by the community
vegansupreme’s picture

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?

vegansupreme’s picture

edit: (duplicate post)

sg88’s picture

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.

Marvin Daugherty’s picture

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.

sg88’s picture

StatusFileSize
new3.53 KB
PASSED: [[SimpleTest]]: [MySQL] 0 pass(es).
[ View ]

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

sg88’s picture

Status:Reviewed & tested by the community» Needs review