Pretty Photo 通过 ajax 帧加载图片

Question

我有一个 angular 应用程序可以显示一些图像。我正在打开 prettyPhoto ajax window 并将路径名传递给 URL。我的脚本可以很好地加载图像，但是，它没有像 prettyPhoto 传统上显示照片那样显示图像。

我需要做什么才能让它表现得像在显示照片？即：有全屏按钮，根据照片调整灯箱大小等。

这可能吗？

我正在通过以下方式打开灯箱：

$scope.openLightbox = function()
{
  if (typeof $.prettyPhoto.open !== "function")
  {
    $.fn.prettyPhoto({
      social_tools:false,
      deeplinking: false,
      keyboard_shortcuts: false
    });
    $.prettyPhoto.open('resources/php/view/lightbox.php?ajax=true&path=' + $base64.encode($scope.currentFile));
    return;
  }
  $.prettyPhoto.open('resources/php/view/lightbox.php?ajax=true&path=' + $base64.encode($scope.currentFile));
}

$scope.currentFile 类似于：data/39/my_image_name.jpg

我正在像这样解析 PHP：

$path    = base64_decode($_GET['path']);
$finfo   = finfo_open(FILEINFO_MIME_TYPE);
$mime    = finfo_file($finfo, $path);
$mimeExt = explode('/', $mime);

if ($mimeExt[0] == 'image')
{
  echo '<img width="100%" height="100%" src="data:image/' . $mimeExt[1] . ';base64,' . base64_encode(file_get_contents($path)) . '">';
}
elseif ($mimeExt[0] == 'video')
{

}
finfo_close($finfo);

就像我上面说的，图像显示得很好，我只是希望它以标准的 prettyPhoto 图像行为显示。我知道这可能是不可能的。

编辑

结果证明我根本不需要 AJAX:

$scope.openLightbox = function()
{
  if (typeof $.prettyPhoto.open !== "function")
  {
    $.fn.prettyPhoto({
      social_tools:false,
      deeplinking: false,
      keyboard_shortcuts: false
    });
    $.prettyPhoto.open('resources/php/view/lightbox.php?path=' + $base64.encode($scope.currentFile));
    return;
  }
  $.prettyPhoto.open('resources/php/view/lightbox.php?path=' + $base64.encode($scope.currentFile));
}

最后是我的 php，我将图像直接输出到浏览器，因此 prettyPhoto 认为它只是在加载图像

<?php
require("../config.php");
require("../connect.php");
session_start();

if (isset($_SESSION['ds_level']))
{
  $path    = base64_decode($_GET['path']);
  $finfo   = finfo_open(FILEINFO_MIME_TYPE);
  $mime    = finfo_file($finfo, $path);
  $mimeExt = explode('/', $mime);

  if ($mimeExt[0] == 'image')
  {
    header('Content-Type: image/' . $mimeExt[1]);
    echo file_get_contents($path);
  }
  elseif ($mimeExt[0] == 'video')
  {
    //do other stuff to display video
  }
  finfo_close($finfo);
}
else
{
  //-- no access
}
?>

Answer 1

What do I need to do so it behaves like it is displaying a photo? i.e: has the fullscreen button, resizes the lightbox to the photo etc.

Is that even possible?

是的，有可能。您需要创建一个专用指令，as specified in this Gist:

.directive('prettyp', function(){
  return function(scope, element, attrs) {
  $("[rel^='prettyPhoto']").prettyPhoto({deeplinking: false,    social_tools: false});
  }
})

要应用它，请在锚点中指定 rel="prettyPhoto"，如下所示：

<a prettyp ng-href="{{image.url}}" rel="prettyPhoto[main]" target="_blank" title="{{image.title}}">

工作原理

该指令查找以 prettyPhoto 开头的 rel 属性，并对其应用 prettyPhoto 魔法。

例子

我做了一个你可以玩的 Plunk：check the Plunk

在您的代码中

要在您的代码中应用该指令，您可以替换：

echo '<a href="data:image/' . $mimeExt[1] . ';base64,' . base64_encode(file_get_contents($path)) . '" prettyp rel="prettyPhoto[main]" target="_blank" ><img width="100%" height="100%" src="data:image/' . $mimeExt[1] . ';base64,' . base64_encode(file_get_contents($path)) . '"></a>';

与：

echo '<img width="100%" height="100%" src="data:image/' . $mimeExt[1] . ';base64,' . base64_encode(file_get_contents($path)) . '">';

聊天后编辑

由于您的图像受到 .htaccess 的保护，您已选择使用图像的 base64 版本，为什么不呢？

但是，如果您等到用户点击您应用中的 'view' 按钮，那么在将其传递给 prettyPhoto 之前获取受保护的图像并对其进行编码的时间太长了：

我建议你在用户点击view按钮之前获取你的图像，当用户在列表中选择图像时。

漫长的过程：

对 php 服务器进行 ajax 调用；

有 php 应用获取图像；

有 php 应用编码图像；

有 angularjs/javaScript 应用存储 base64 字符串

然后可以在后台自动、预防性地完成。然后将优化用户体验。

So when the user does click the view button, the base64 version of the image can be passed to prettyPhoto straight away, without any server call: this would produce the same result as displayed in the plunkr I provided, when the button is pressed.

Pretty Photo 通过 ajax 帧加载图片

Pretty Photo load image via ajax frame

php

ajax

prettyphoto

angularjs