web-dev-qa-db-ja.com

PrettyPhotoプラグインにダウンロードボタンを追加する

ユーザーが自分のサイトで写真を閲覧しているときに、prettyPhotoライトボックスにフルサイズの画像のダウンロードボタンリンクを追加したいです。

現在私は自分のサイトで prettyPhoto Media プラグインを使用しています。また、prettyPhotoに表示するためにこのコード（ this post から取得）も使用しています。ギャラリー内のフルサイズの画像よりも小さい画像なので、読み込み時間は長くなります。

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

しかし、prettyPhotoは現在サムネイルサイズの画像しか表示していないため、視聴者はフルサイズの画像（幅2000ピクセル前後）を取得できないため、ダウンロードボタンを追加する必要があるため、使用する全画像をダウンロードできます。

ありがとうございます。

galleryhackswp-get-attachment-image
1
Nathan

それで私にとって最良の選択肢は、私はプログラマーではないということですが、単にプラグインを変更することでした。 このプラグイン を使用して、必要な結果を得ました（すでにダウンロードリンクがあります）。

0
Nathan

プログラマは prettyPhotoのドキュメントを利用することができます そしてfooter.phpでwp_footer（）を呼び出した後にプラグインを修正することができます。

  1. Image_markupでボタンを追加してください

  2. ダウンロードボタンを追加した後、prettyPhotoに少し高さの向上を与えます。

    <?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