Pretty Photo загрузить изображение через фрейм ajax

У меня есть угловое приложение, которое будет отображать некоторые изображения. Я открываю окно ajax prettyPhoto и передаю путь к URL-адресу. Мой скрипт загружает изображение нормально, однако он не отображает изображение так, как красивое фото традиционно отображает фотографию.

Что мне нужно сделать, чтобы он вел себя так, как будто он отображает фотографию? то есть: имеет полноэкранную кнопку, изменяет размер лайтбокса на фотографию и т. д.

Это вообще возможно?

Я открываю лайтбокс через:

$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
}
?>

person Ronnie    schedule 21.05.2015    source источник


Ответы (1)


Что мне нужно сделать, чтобы он вел себя так, как будто он отображает фотографию? то есть: имеет полноэкранную кнопку, изменяет размер лайтбокса на фотографию и т. д.

Это вообще возможно?

Да, это возможно. Вам необходимо создать специальную директиву, как указано в этом 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.


ПРИМЕР

Я сделал планк, с которым вы можете поиграться: проверьте планк


В ВАШЕМ КОДЕ

Чтобы применить директиву в своем коде, вы можете заменить:

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:

введите здесь описание изображения

Я рекомендую вам загрузить свое изображение до того, как пользователь нажмет кнопку view, когда пользователь выберет изображение в списке.

Долгий процесс:

  1. сделать ajax-вызов на php-сервер;
  2. получить изображение для приложения php;
  3. кодировать изображение в приложении php;
  4. приложение angularjs/javaScript хранит строку base64

затем может выполняться автоматически, превентивно, в фоновом режиме. Пользовательский опыт будет оптимизирован.

Поэтому, когда пользователь нажимает кнопку view, версия изображения base64 может быть передана в prettyPhoto сразу же, без какого-либо вызова сервера: это даст тот же результат, что и в предоставленном мной plunkr, при нажатии кнопки.

person Manube    schedule 24.05.2015
comment
проблема в том, что у меня нет тегов привязки для открытия файлов. У меня есть файловое дерево с кнопкой просмотра. Когда вы выбрали файл в дереве файлов, пользователь нажимает кнопку просмотра, которая программно вызывает $.prettyPhoto.open('resources/php/view/lightbox.php?ajax=true&path=' + $base64.encode($scope.currentFile));. Я уже вывел тег изображения с шириной и высотой 100%, и это работает. Рамка prettyPhoto не изменяет размер, как при открытии традиционного изображения. - person Ronnie; 26.05.2015
comment
блог, на который вы предоставили ссылку, использует ту же технику, о которой я упоминал, за исключением того, что опубликованный мной код адаптирован для angularjs. Не могли бы вы опубликовать код кнопки просмотра дерева файлов, пожалуйста? Вы проверили сделанный мной планк, дает ли он желаемый результат? Это может быть кнопка вместо тега привязки, если хотите. - person Manube; 26.05.2015
comment
Вот скриншот того, как выглядит мой интерфейс. Я отредактирую свой пост, чтобы включить полный код для запуска лайтбокса. imgur.com/Xi3rUgl Я видел plunkr, однако ваш plunkr предполагает, что я знаю путь. Мое приложение знает относительный путь, но я должен вывести его с использованием base64, потому что изображения заблокированы через htaccess по соображениям безопасности. - person Ronnie; 26.05.2015
comment
спасибо, ваш скриншот полезен. Чтобы показать изображение, вы должны знать путь, независимо от того, задействовано какое-то декодирование или нет. Итак, давайте предположим, что вы знаете путь. Если бы вам нужно было изложить свою проблему в нескольких словах, это было бы так: как сделать так, чтобы prettyPhoto открывал мое изображение, когда я нажимаю кнопку вместо ссылки привязки? - person Manube; 26.05.2015
comment
@Ronnie, я сделал еще одну директиву и добавил кнопку, которая хорошо работает с prettyPhoto в plunkr: plnkr .co/edit/wOKBE9?p=preview Надеялись, что это именно то, что вы искали? кодировку/кодировку base64 можно добавить в директиву, если хотите, просто дайте мне знать... - person Manube; 26.05.2015
comment
Я должен вывести это изображение через base64, потому что apache блокирует его через HTTP. Таким образом, имя пути, даже известное, недоступно напрямую. Вот почему мне нужен фрейм ajax. - person Ronnie; 26.05.2015
comment
Давайте продолжим обсуждение в чате. - person Manube; 26.05.2015
comment
Я считаю, что понял это. Вместо того, чтобы использовать фрейм AJAX, я использую lightbox.php для вывода изображения напрямую, используя imagecreatefromstring и imagejpeg/imagepng. Таким образом, prettyPhoto думает, что загружает просто изображение. Пример строки: $.prettyPhoto.open('resources/php/view/lightbox.php?path={a base64 encoded path name} - person Ronnie; 26.05.2015
comment
Что касается вашего редактирования. Я не рекомендую извлекать изображения до того, как пользователь щелкнет, потому что в моем случае эти изображения могут быть довольно большими и могут содержать любое количество изображений в данной папке. Это серьезно нагрузило бы сервер, если бы мне пришлось предварительно загружать все изображения. Когда я упомянул предварительную загрузку в чате, я имел в виду видимый предварительный загрузчик, а не предварительную загрузку изображений. - person Ronnie; 26.05.2015
comment
Вы бы предварительно загрузили только изображение, выбранное пользователем в списке (синий фон на картинке), но до того, как будет нажата кнопка просмотра - person Manube; 26.05.2015
comment
а, я понимаю, что вы имеете в виду. Итак, когда файл выбран, он предварительно загружается независимо от того, нажимают ли они просмотр, верно? - person Ronnie; 26.05.2015
comment
Да что ты скажешь? - person Manube; 26.05.2015
comment
Мне все еще не нравится эта идея. Я не думаю, что это необходимо для достижения того, что мне нужно. Я действительно сделал это очень просто. Я отредактирую свой пост выше, чтобы показать решение. - person Ronnie; 26.05.2015
comment
Хорошо, рад, что вы смогли это исправить - person Manube; 26.05.2015
comment
Я ценю всю помощь, разговаривая с вами, я настроился на другой лад. Я бы сказал, что это стоит 100 баллов само по себе. Если кому-то интересно мое решение, проверьте редактирование. Спасибо @Manube - person Ronnie; 26.05.2015
comment
Спасибо, рад, что смог немного помочь :) - person Manube; 26.05.2015