How to add a link in Jquery PrettyPhoto to download the image
I am using Jquery PrettyPhoto to have a slide show, however it does not let the users to download the images. Anyone know how can I add a link to it so users will be able to download the images?
Here is my code: (I am using prettyPhoto Widget in Yii, but any answer in general for prettyPhoto will be great)
<?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');?>
Answer
This solution don't need change PrettyPhoto JS.
I use callback function for search the element that contain the big image and add a new element linked to image (only works in 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>
There is another (no HTML5) solution, changing:
$(this).wrap('<a target="_blank" href="' + $(this).prev().attr('src') + '" download />');
by
$(this).wrap('<a href="download.php?file=' + $(this).prev().attr('src') + '" />');
You need a "download.php" to force download img, for example: https://stackoverflow.com/a/7238099/2369084