Add Download Button in prettyPhoto Plugin

1 Views

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:

Read More
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.

Thanks!

Post Views: 1

Related posts

Leave a Reply

3 comments

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

<script>
jQuery(document).ready(function() { 
   jQuery("a[rel^='prettyPhoto']").prettyPhoto({
        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);
        }
    });
});
</script>

</body>
</html>

  3. 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>',