2012-09-18 49 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