2012-09-18 61 views
3

我正在使用Jquery PrettyPhoto進行幻燈片放映,但它不會讓用戶下載圖像。任何人都知道我該如何添加一個鏈接,以便用戶能夠下載圖像?如何在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');?> 

回答

1

輕鬆!

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

OK,我解決我的問題,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();} 
     //.... 
    } 

的例子中所做的更改,如果你想在警予的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) 
     );  
    } 
+0

沒有PrettyPhoto JS變化是必要的。看我的解決方案。謝謝。 –

1

嗯,這是一個很大晚我猜,但它會幫助別人,

首先開始使用最新版本,並擁有jQuery的1.4+ ATLEAST造成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> 

做鏈接=「烏爾鏈接」,而是使用數據屬性,像這樣

這就是第1步改變你的格式一點。

現在的OpenUP烏爾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'); 
       } 

上述2線作爲所述UC一個替換」 .your_class'帶u想要的任何名稱等進入到‘跳到’

,並全部完成刷新頁面烏爾即F5的原因這是在文件發生變化.....並加載它會工作好。

歡呼聲。

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

+0

但圖像在新標籤中打開。並不作爲下載或保存作爲選項不會出現。你可以幫我嗎? – Sweety