Добавить кнопку загрузки в плагин prettyPhoto


Я хотел бы добавить ссылку на кнопку загрузки для полноразмерного изображения в лайтбоксе prettyPhoto, когда пользователь просматривает фотографию на моем сайте.

В настоящее время я использую плагин prettyPhoto Media на своем сайте, и я также использовал этот код (взятый из этого поста), чтобы позволить prettyPhoto просматривать изображение меньшего размера, чем полноразмерное изображение в галереях, поэтому время загрузки будет лучше:

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 пикселей), поэтому возникает желание добавить кнопку загрузки, чтобы они могли загрузить полное изображение для использования.

Спасибо!

Author: Nathan, 2012-10-12

3 answers

Хорошо программисты могут использовать документацию по prettyPhoto и модифицировать плагин после вызова wp_footer()footer.php:

  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
Author: P-S, 2013-10-06 12:00:49

Поэтому лучшим вариантом для меня, поскольку я не программист, было просто сменить плагины. Я использовал этот плагин и получил нужные мне результаты (у него уже есть ссылка для скачивания).

 0
Author: Nathan, 2012-10-15 04:13:55

Я решил эту проблему, отредактировав prettyPhoto.js файл в атрибуте img_markup.

Измените это

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

К этому

image_markup: '<img id="fullResImage" src="{path}" /><a class="pp_download" href="{path} download"><i class="enotype-icon-download"></i></a>',
 0
Author: ThalesAndrade, 2019-10-15 22:01:04