Pretty Photo загрузить изображение через рамку Ajax

У меня есть угловое приложение, которое будет отображать некоторые изображения. Я открываю окно 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
}
?>

3

Решение

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

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

Да, это возможно. Вам нужно создать отдельную директиву, как указано в этом Гисте:

.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, с которым можно поиграть: проверить 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:

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

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

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

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

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

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

3

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]