我正在使用 Jquery PrettyPhoto 进行幻灯片放映，但它不允许用户下载图像。有人知道如何添加链接以便用户能够下载图像吗？
这是我的代码:(我在 Yii 中使用 PrettyPhoto Widget，但一般来说 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');?>
最佳答案
此解决方案不需要更改 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
关于jquery - 如何在Jquery PrettyPhoto中添加链接来下载图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12481434/