php ajax loading图片居中显示,php-通过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 '';
}
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认为它只是加载图像
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
}
?>
解决方法:
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?
.directive('prettyp', function(){
return function(scope, element, attrs) {
$("[rel^='prettyPhoto']").prettyPhoto({deeplinking: false, social_tools: false});
}
})
要应用它,请在锚点中指定rel =“ prettyPhoto”,如下所示:
这个怎么运作
该伪指令查找以prettyPhoto开头的rel属性,然后将prettyPhoto魔术应用到该属性.
例
我制作了一个Plunk,可以玩一下:check the Plunk
用您的代码
要在代码中应用指令,您可以替换:
echo '';
与:
echo '';
聊天后编辑
由于图像受.htaccess保护,因此您选择使用图像的base64版本,为什么不呢?
但是,似乎如果您等到用户单击应用程序中的“查看”按钮,在将其传递给prettyPhoto之前,要获取受保护的图像并对其进行编码会花费太长时间:
我建议您在用户单击列表中的图像时,在用户单击查看按钮之前先获取图像.
漫长的过程:
>对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.
标签:angularjs,ajax,prettyphoto,php
来源: https://codeday.me/bug/20191120/2042783.html
php ajax loading图片居中显示,php-通过ajax框架加载漂亮照片相关推荐
- php ajax loading图片居中显示,ajax+php上次图片
HTML: ajax: $("#changeImg").change(function () { var data = new FormData(); //为FormData对象添 ...
- php ajax loading图片居中显示,PHP语言入门之PHP+ajax实现登录按钮加载loading效果
本篇教程探讨了PHP语言入门之PHP+ajax实现登录按钮加载loading效果,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入. < php+ajax实现登录按钮加载loa ...
- 超大超长图片居中显示且放大缩小无影响
1. 超大图片居中显示 1.1 放大缩小都居中显示 <!DOCTYPE html> <html lang="en"> <head> <me ...
- 在html如何让图片居中 css,CSS怎么让图片居中?如何让图片居中显示
众所周知,HTML 和 CSS 结合后功能强大,可以做出千变万化的样式,那么你知道如何用 CSS 让图片居中显示吗?本篇文章告诉你 一.display:table-cell HTML 代码如下: CS ...
- html实现页面中内容居中显示图片,javascript怎么让图片居中显示?
javascript怎么让图片居中显示?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. javascript让图片居中显示的方法 1.准备一个图片,如图, ...
- php图片居中显示图片,怎样让css图片居中显示
在项目中我们也经常会遇到这种情况,要让图片居中显示,方法有很多,不过最推荐的就是用CSS来操作DIV,那么下面就给大家举介绍俩种方法,用CSS操作让图片居中显示. 首先让图片中DIV对象盒子内水平居中 ...
- CSS图片居中显示 超出div容器高度度隐藏 css3 object-fit
CSS图片居中显示 超出div容器高度度隐藏 图片高度低于div容器高度上下不留白显示 通过固定容器的宽高加上flex布局结合css3的属性object-fit实现 .el-image{width: ...
- Android中从assets资源中读取图片文件并保存到内部存储器并加载显示在ImageView中
场景 Android系统为每个新设计的程序提供了/assets目录,这个目录保存的文件可以打包在程序里./res和/assets的不同点是,android不为/assets下的文件生成ID.如果使用/ ...
- php 载入css就可以显示,如何在进度条加载后显示页面
1.思路:加入很多图片,以延迟加载时间,实现加载完后显示图片.定义一个外层p,覆盖住图片,在内层p中引入加载时显示的图片,让内层p居中在页面上,利用setInterval定时器设置3秒后将外层p隐藏, ...
最新文章
- 使用Wireshark分析工控协议
- 软件过程与项目管理(作业一)
- linuxg下c++ 类导出_为什么PDF导出功能在SOLIDWORKS Electrical中不起作用?
- AliOS Things手势识别应用演示
- mysql blob 好处_MySQL中的BLOB类型
- Java工作笔记-IntelliJ IDEA中的精确搜索
- CCF201809-4 再卖菜
- Android 系统(257)---Launcher显示未读通知的数量
- laravel 模型事件几种用法
- java类转换异常,java.lang.ClassCastException: java.lang.Integer cannot be cast to java.lang.Long
- 手机“开口”,化身“智能机器人”
- java p12证书验证_Java s2s通过p12证书和基本授权连接到https
- 常见边缘检测对比(Roberts算子、Prewitt算子、Sobel算子、Laplacian算子、Canny算子)
- Win10smb2.0共享至android速度慢问题解决
- 阿里的Maven仓库地址
- dhcp二层中继和三层中继
- 关于我和计算机的故事
- linux otg u盘,如何使用OTG手机功能U盘?
- 安卓开发中许多应用到的资源
- Kinectfusion开源实现_配置Kinfu环境_Cmake编译PCL点云库_Kinect3D重建