yii 如何在Jquery PrettyPhoto中添加链接以下载图片

8e2ybdfx  于 2022-11-09  发布在  jQuery
关注(0)|答案(6)|浏览(172)

我用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');?>
yii

6条答案

按热度按时间
cwtwac6a

cwtwac6a1#

此解决方案不需要更改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）分享  回复(0）举报  2022-11-09
fbcarpbf

fbcarpbf2#

别紧张！
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）分享  回复(0）举报  2022-11-09
13z8s7eq

13z8s7eq3#

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

赞(0）分享  回复(0）举报  2022-11-09
des4xlb0

des4xlb04#

我想现在已经很晚了但这对某些人有帮助
首先，开始使用最新版本，并有jquery 1.4+至少原因不是2.0是准备好了，我们都最好开始移动lol。
好的，我将采用上面的例子

<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”，而是使用如下所示的数据属性

这是第一步，改变你的格式有点。
现在打开你的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行所述，您可以将.“your_class”替换为您想要的任何名称，然后转到“转到页面”
和所有完成刷新你的页面，即F5的原因，这是在文件中更改.....和加载，它会工作得很好。
为大家干杯。

赞(0）分享  回复(0）举报  2022-11-09
tpxzln5u

tpxzln5u5#

好了，我解决了我的问题，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)
        );      
    }
赞(0）分享  回复(0）举报  2022-11-09
hmmo2u0o

hmmo2u0o6#

我通过编辑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>',
赞(0）分享  回复(0）举报  2022-11-09
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com