Question

我有一个角度应用程序，将显示一些图像。我打开一个prettyPhoto ajax窗口并将路径名传递给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

我需要做什么才能像显示照片一样？即：拥有全屏按钮，将灯箱的大小调整为照片等。

这甚至可能吗？

是的，可能。您需要创建专用指令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}}">

如何运作

该指令查找以rel开头的prettyPhoto属性，并将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版本，为什么不呢？

但是，如果您等到用户点击“视图”，你的应用程序中的按钮，在将其传递给prettyPhoto之前，需要很长时间才能获取受保护的图像并对其进行编码：

enter image description here

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

漫长的过程：

对php服务器进行ajax调用;

有php app获取图片;

有php app编码图像;

让angularjs / javaScript app存储base64字符串
然后，
可以在后台自动预防。然后将优化用户体验。

因此，当用户单击view按钮时，图像的base64版本可以立即传递给prettyPhoto，无需任何服务器调用：这将产生与我提供的plunkr中显示的相同的结果，当按下按钮时。

漂亮的照片通过ajax帧加载图像

1 个答案: