Image with Pretty Photo via ajax frame
I have an angular app that will display some images. I open a prettyPhoto ajax window and pass the path to the url. My script loads the image ok, however it doesn't render the image the way prettyPhoto traditionally renders a photo.
What do I need to do to make him act like he's showing a photo? ie: has a full screen button, resizes lightbox to photo, etc.
Is it possible?
I open the lightbox via:
$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
will look something like this: data/39/my_image_name.jpg
and I am parsing PHP like this:
$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);
As I said above, the image displays very well, I just want it to display with the standard prettyPhoto behavior. I understand that this may not be possible.
EDIT
So, I don't need AJAX afterall:
$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));
}
and finally my php that I was outputting the image directly to the browser, so prettyPhoto thinks it is just loading the image
<?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
}
?>
source to share
What do I need to do to make him act like he's showing a photo? ie: has a full screen button, resizes lightbox to photo, etc.
Is it possible?
Yes, it is possible . You need to create a custom directive as mentioned in this Gist :
.directive('prettyp', function(){
return function(scope, element, attrs) {
$("[rel^='prettyPhoto']").prettyPhoto({deeplinking: false, social_tools: false});
}
})
To apply it, specify rel="prettyPhoto"
in the anchor, for example:
<a prettyp ng-href="{{image.url}}" rel="prettyPhoto[main]" target="_blank" title="{{image.title}}">
HOW IT WORKS
The directive looks for an attribute rel
starting with prettyPhoto
and applies prettyPhoto liking to it.
Example
I made a Plunk you can play with: check out Plunk
IN YOUR CODE
To apply a directive in your code, you can replace:
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>';
from:
echo '<img width="100%" height="100%" src="data:image/' . $mimeExt[1] . ';base64,' . base64_encode(file_get_contents($path)) . '">';
EDIT AFTER CHAT SESSION
As your images are protected with .htaccess
, you've decided to work with a base 64 version of your image, and why not?
However, it seems that if you wait for the user to click the "view" button in your application, it will take too long to navigate to the protected image and encode it before passing it to prettyPhoto:
I recommend that you select an image before the user clicks the button view
when the user selects an image from the list.
Long procces:
- make an ajax call to the php server;
- you have an image for getting php app;
- has an image encoded by php app;
- Angularjs / javaScript app store base64 string
can then be performed automatically, proactively, in the background. Then the user experience will be optimized.
This way, when the user clicks the button
view
, the base version of the image can be pushed to prettyPhoto right away, without any call to the server: this will produce the same result that is displayed in the plunkr I presented when.
source to share