web-dev-qa-db-fra.com

Ajouter un bouton de téléchargement dans le plugin prettyPhoto

J'aimerais ajouter un lien de bouton de téléchargement pour l'image en taille réelle dans la lightbox prettyPhoto lorsqu'un utilisateur affiche une photo sur mon site.

Actuellement, j'utilise le plugin prettyPhoto Media sur mon site, et j'ai également utilisé ce code (tiré de cet article ) afin de permettre à prettyPhoto d'afficher une image plus petite que celle en taille réelle dans les galeries. le temps de chargement sera meilleur:

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

Mais comme prettyPhoto n’affiche plus qu’une taille miniature de l’image, les utilisateurs ne peuvent pas obtenir les images en taille réelle (environ 2 000 pixels de large), d’où le désir d’ajouter un bouton de téléchargement afin de pouvoir télécharger l’image complète à utiliser.

Merci!

galleryhackswp-get-attachment-image
1
Nathan

Donc, la meilleure option pour moi, étant que je ne suis pas un programmeur, était juste de changer de plugin. J'ai utilisé ce plugin et obtenu les résultats dont j'avais besoin (il existe déjà un lien de téléchargement).

0
Nathan

Les programmeurs peuvent utiliser la documentation prettyPhoto et modifier le plug-in après l'appel de wp_footer () dans footer.php :

  1. Ajouter le bouton via image_markup

  2. Donnez à prettyPhoto un petit coup de pouce après avoir ajouté le bouton Télécharger.

    <?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>
1
P-S