I would like to add a download button link for the full-sized image on the prettyPhoto lightbox when a user views a photo on my site.

Currently I use the prettyPhoto Media plugin on my site, and I have also used this code (taken from this post) in order to allow prettyPhoto to view a smaller image than the full sized image in galleries so the loading time will be better:

function oikos_get_attachment_link_filter( $content, $post_id, $size, $permalink ) {

    // Only do this if we're getting the file URL
    if (! $permalink) {
        // This returns an array of (url, width, height)
        $image = wp_get_attachment_image_src( $post_id, 'large_image_size' );
        $new_content = preg_replace('/href=\'(.*?)\'/', 'href=\'' . $image[0] . '\'', $content );
        return $new_content;

add_filter('wp_get_attachment_link', 'oikos_get_attachment_link_filter', 10, 4);

But, since prettyPhoto now is only viewing a thumbnail size of the image, viewers cannot get the full-sized images (around 2000px wide), hence the desire to add a download button, so they can download the full image to use.


  • Please elaborate what exactly you are having problem with. Retrieving link in right size? Including code in plugin output? Questions very specific to plugins rarely get good answer since much fewer people are likely to have that specific experience.
    – Rarst
    Oct 13, 2012 at 22:09
  • @Rarst I will try: I need help retrieving the link to the full size image to be able to place a download link in the full image size in the prettyPhoto plugin. If I could get that far, I probably could do the rest on my own. But I posted specifically for this plugin, because my real question is specific (but like you said, maybe not many people would know the answer). Thanks for your time!
    – Nathan
    Oct 14, 2012 at 3:38
  • Here is my solution - loco.ru/materials/… add link to open original image.
    – user27741
    Feb 20, 2013 at 8:38

3 Answers 3


Well programmers can make use of the prettyPhoto documentation and modify the plugin after the wp_footer() call in footer.php:

  1. Add the button via image_markup
  2. Give prettyPhoto a little height boost after adding the Download button.

    <?php wp_footer();?>
    <style>.download-btn{ margin-top: 10px; padding: 5px; background: #ccc; float: left }</style>
    jQuery(document).ready(function() { 
            image_markup: '<img id="fullResImage" src="{path}" /><span class="download-btn"><a href="{path}">Download</a></span>',
            changepicturecallback: function(){
                jQuery(".pp_content").css("height", $(".pp_content").height() + jQuery(".download-btn").outerHeight() + 10);

So the best option for me, being that I am not a programmer, was just to change plugins. I used this plugin and got the results I needed (it already has a download link).


I solved this editing the prettyPhoto.js file in the img_markup attribute.

Change this

image_markup: '<img id="fullResImage" src="{path}" />',

To this

image_markup: '<img id="fullResImage" src="{path}" /><a class="pp_download" href="{path} download"><i class="enotype-icon-download"></i></a>',

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.