【问题标题】:How to add a link in Jquery PrettyPhoto to download the image如何在 Jquery PrettyPhoto 中添加链接以下载图像
【发布时间】:2012-09-10 23:28:41
【问题描述】:

我正在使用 Jquery PrettyPhoto 进行幻灯片放映,但它不允许用户下载图像。任何人都知道如何添加链接,以便用户能够下载图像?

这是我的代码:(我在 Yii 中使用 prettyPhoto 小部件,但是对于 prettyPhoto 的任何一般答案都会很棒)

<?php 
  $this->beginWidget('ext.prettyPhoto.PrettyPhoto', array(
        'id'=>'pretty_photo',
        // prettyPhoto options
        'options'=>array(
            'opacity'=>0.60,
            'modal'=>true,
        ),
    ));
?>
<div class="column4-front image-gallery">

         <a href="/files/show/<?php echo $data->image; ?>" rel="prettyPhoto[pp_gal]" title="<?php echo $data->caption; ?>">
             <img src="/files/show/thumb/<?php echo $data->image; ?>" />
         </a>

</div>
<?php $this->endWidget('widgets.prettyPhoto');?>  

【问题讨论】:

    标签: jquery yii prettyphoto


    【解决方案1】:

    我解决了在 img_markup 属性中编辑 prettyPhoto.js 文件的问题。

    改变这个

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

    【讨论】:

      【解决方案2】:

      此解决方案不需要更改 PrettyPhoto JS

      我使用回调函数搜索包含大图像的元素并添加一个链接到图像的新元素(仅适用于HTML5):

      <!DOCTYPE html>
      <html>
          <head>
              <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
              <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
              <script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>     
          </head>
          <body>
              <div id="main">
                  <a href="images/fullscreen/2.jpg" rel="prettyPhoto[gallery1]"><img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="Nice building" /></a>
                  <a href="images/fullscreen/3.jpg" rel="prettyPhoto[gallery1]"><img src="images/thumbnails/t_3.jpg" width="60" height="60" alt="Fire!" /></a>
              </div>
              <script type="text/javascript" charset="utf-8">
                  $(document).ready(function(){
                      //Add callback function to prettyPhoto, called everytime an item is shown/changed
                      $("a[rel^='prettyPhoto']").prettyPhoto({
                          changepicturecallback: function(){add_download()}
                      });
                  });
      
                  function add_download(){
                      //If "download" class doesn't exist
                      if (!$(".download")[0]){
                          //Search for the div that contains the image and add an element with Text (or image)
                          $("#pp_full_res").append('<p class="download" style="cursor: pointer;position: absolute;right: 65px;z-index: 9999;">DOWNLOAD</p>');
      
                          $('.download').each(function(){
                              //Add "download" attribute that only works with HTML5
                              $(this).wrap('<a target="_blank" href="' + $(this).prev().attr('src') + '" download />');
                          });
                      }
      
                  }
              </script>
          </body>
      </html>
      

      还有另一种(无 HTML5)解决方案,正在改变:

      $(this).wrap('<a target="_blank" href="' + $(this).prev().attr('src') + '" download />');
      

      通过

      $(this).wrap('<a href="download.php?file=' + $(this).prev().attr('src') + '" />');
      

      你需要一个“download.php”来强制下载img,例如: https://stackoverflow.com/a/7238099/2369084

      【讨论】:

      • 但图片在新标签页中打开。并且不工作,因为没有出现下载或另存为选项。你能帮帮我吗?
      【解决方案3】:

      简单!

      HTML (标题为空!)

      <a id="photo_link" href="http://link_to_image_or_video" rel="prettyPhoto" title="">
          <img src="images/play-video.png" alt="" title="" width="380" height="147" />
      </a>
      

      JS(里面的文档准备好了)

      //do not show title on download link hover (download button)
      $("#photo_link").hover(function(e){
      
          $(this).attr('data-title', $(this).attr('title'));
          $(this).removeAttr('title');
      
      },
      function(e){
      
          $(this).attr('title', $(this).attr('data-title'));
      
      }); 
      
      //add download link on the fly on click of photo link
      $("#photo_link").on('click', function(){
          $(this).attr('title', '<div class="center"><a href="#download_link" class="btn btn-primary btn-lg"><strong>Download</strong></a></div>');
      });
      

      无需更改 PrettyPhoto JS。这是一个简单的想法。你在 Yii 里面玩 框架。

      更简单:只有 JS(在你的视图中包含 JS)

      $("a[rel^='prettyPhoto']").prettyPhoto({
          social_tools: '<div class="center"><a id="get_started" href="#contact" class="btn btn-primary btn-lg"><strong>Download</strong></a></div>',
          default_width: 800,
          default_height: 450
      });
      

      【讨论】:

        【解决方案4】:

        好吧,我想这已经很晚了,但它会对某人有所帮助,

        首先开始使用最新版本,并且至少有 jquery 1.4+,因为 2.0 还没有准备好,我们最好开始行动,哈哈。

        好的,我会采取上面的例子

         <a href='./uploads/1f.jpg' rel='prettyPhoto[gallery1]' title='Nature Photo One' >
               <img src='./uploads/1t.jpg' border='0' alt='' link='<a href="download.php?f=1f.jpg" class="url">Download This Photo</a>' />
             </a>
        

        不要这样做 link="ur link" 而是使用 data 属性像这样

        这就是改变你的格式的第一步。

        现在打开你的 prettyphoto.js

        找到

        social_tools: '<div class="twitter"><a href="http://twitter.com/share" class="twitter-share-button" data-count="none">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div><div class="facebook"><iframe src="//www.facebook.com/plugins/like.php?locale=en_US&href={location_href}&amp;layout=button_count&amp;show_faces=true&amp;width=500&amp;action=like&amp;font&amp;colorscheme=light&amp;height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:500px; height:23px;" allowTransparency="true"></iframe></div>' /* html or false to disable */
        

        它将与开头的所有标记一起使用。

        现在编辑如下

        social_tools: '<div class="{my_class}"><a href="{my_url}">{my_link}</a></div><br/><div class="twitter"><a href="http://twitter.com/share" class="twitter-share-button" data-count="none">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div><div class="facebook"><iframe src="//www.facebook.com/plugins/like.php?locale=en_US&href={location_href}&amp;layout=button_count&amp;show_faces=true&amp;width=500&amp;action=like&amp;font&amp;colorscheme=light&amp;height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:500px; height:23px;" allowTransparency="true"></iframe></div>' /* html or false to disable */
        

        接下来找到这个部分

        // Rebuild Facebook Like Button with updated href
                    if(settings.social_tools){
                        facebook_like_link = settings.social_tools.replace('{location_href}', encodeURIComponent(location.href)); 
                        $pp_pic_holder.find('.pp_social').html(facebook_like_link);
                    }
        

        204 号线附近

        替换为

        if(settings.social_tools){
                        facebook_like_link = settings.social_tools.replace('{location_href}', encodeURIComponent(location.href)); 
                        $pp_pic_holder.find('.pp_social').html(facebook_like_link);
         settings.social_tools.replace('{my_url}',encodeURIComponent($("img[src='"+pp_images[set_position]+"']").data('link')));
        
        // CUSTOMIZE BELOW TO YOUR NEED
        
        settings.social_tools.replace('{my_class}','your_class');
        settings.social_tools.replace('{my_link}','Go To Page');
                        }
        

        如上所述,您可以将“.your_class”替换为您想要的任何名称,然后转到“转到页面”

        一切都完成了刷新你的页面,即 F5,因为这在文件中被更改了.....并加载,它会工作得很好。

        祝大家好运。

        【讨论】:

          【解决方案5】:

          这是我的解决方案(不适用于 Yii)-http://loco.ru/materials/343-wordpress-nextgen-gallery-dobavit-ssylku-sohranit-foto 添加打开原图的链接。

          【讨论】:

            【解决方案6】:

            好的,我解决了我的问题,here 是我找到的一个例子。他们添加了下载照片的链接,如下所示:

            <ul class='gallery clearfix'>
              <li>
                 <a href='./uploads/1f.jpg' rel='prettyPhoto[gallery1]' title='Nature Photo One' >
                   <img src='./uploads/1t.jpg' border='0' alt='' link='<a href="download.php?f=1f.jpg" class="url">Download This Photo</a>' />
                 </a>
              </li>
              // REST OF THE IMAGES
            
            </ul>
            
             <script type="text/javascript" charset="utf-8">
                $(document).ready(function(){
                    $("a[rel^='prettyPhoto']").prettyPhoto({theme: 'light_rounded'});
                });
             </script>
            

            需要对 jquery.prettyphoto.js 文件进行一些更改。我用的是v 3.1.2,可以下载here

            这是我使用我提到的示例所做的更改before

            (function($) {
            $.prettyPhoto = {version: '3.1.4'};
                $.fn.prettyPhoto = function(pp_settings) {
                pp_settings = jQuery.extend({
                          //....
                          social_tools: '<div class="pp_social"><span class="pp_link"></span></div>'
                          // I deleted the rest in social_tools since I wasn't going to use them, you can just add this to the begining of it.
                       }, pp_settings);
                //....
            
                /*
            * Initialize prettyPhoto.
            */
            $.prettyPhoto.initialize = function() {
                   //...
                   pp_links=(isSet)?jQuery.map(matchedObjects,function(n,i){if($(n).attr('rel').indexOf(theRel)!=-1)return($(n).find('img').attr('link'))?$(n).find('img').attr('link'):"";}):$.makeArray($(this).find('img').attr('link'));
              //...
                }
            
                //...
                $.prettyPhoto.open = function(event) {
                   //....
                   if(pp_links[set_position]!=""){$pp_pic_holder.find('.pp_link').show().html(unescape(pp_links[set_position]));}else{$pp_pic_holder.find('.pp_link').hide();}
                   //....
                }
            

            如果你想在 yii 中使用prettyphoto extention。您可以将 javaScript 文件替换为您修改的文件。那么:

            <?php 
                $this->beginWidget('ext.prettyPhoto.PrettyPhoto', array(
                    'id'=>'pretty_photo',
                    // prettyPhoto options
                    'options'=>array(
                        'opacity'=>0.60,
                        'modal'=>true,
                        'theme'=> 'light_rounded'
                    ),
                ));
            ?>
            <div class="column4-front image-gallery">
            
                    <a href="/files/immagini/<?php echo $data->image; ?>" rel="prettyPhoto[pp_gal]" title="<?php echo $data->caption; ?>">
                         <img src="/files/immagini/thumb/<?php echo $data->image; ?>" link='<a href="<?php echo $this->createUrl('compania/downloadimage',array('f'=>$data->image)); ?>" class="url">Scarica questo foto</a>'/>
            
                     </a>
            
               </div>
               <?php $this->endWidget('widgets.prettyPhoto');?> 
            

            并将其添加到相关控制器中,对我来说是 CompaniaController:

             public function actionDownloadImage()
                {
                    $filename = $_GET['f']; 
                    $fileDir='path to image';
                    Yii::app()->request->sendFile(
                        $filename,
                        file_get_contents($fileDir.$filename)
                    );      
                }
            

            【讨论】:

            • 无需更改 PrettyPhoto JS。请参阅我的解决方案。谢谢。
            猜你喜欢
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2021-01-08
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            相关资源
            最近更新 更多