功能
- 点击图片后，弹出预览窗口；
- 可在预览窗口中查看前一张、后一张
- 工具栏包括“全屏查看、放大、缩小、旋转、保存旋转”
- 预览窗口右上角的关闭按钮
- 鼠标滚轮缩放支持
- 同一页面支持多组图片预览，互不干扰
集成说明
-
将压缩包中文件释放到站点资源文件目录中，如 /Public/script/jquery-photo-gallery，包含如下文件：
image.png
【注意1】这些文件，不用做任何修改，放在这里，知道相对于站点根的路径即可；
【注意2】其中的jquery.js 如果已经加载，则也不需要重复引入。 - 在View模板文件里，引入js脚本：
script src="/Public/script/jquery-photo-gallery/core.js"></script>
- 对需要该效果的图片组，在模板中，以这样的html代码进行生成：
image.png
【注意】<div class="gallerys"> 容器不可或缺，class包含 gallery-pic，并给以 onclick 事件（也可以通过jq绑定事件） onclick="$.openPhotoGallery(this)"
- 在该模板中，或该模板引入的js文件中，编写一个名为 ROTATE_IMAGE_CALLBACK 的function，用于处理点击“保存图片旋转”按钮之后的事件，该方法需要接受一个参数 iframeDocument，本控件使用 iframe 方式实现预览窗口，iframeDocument 即该 iframe 的 document 对象，代码里用于定位到 iframe，并在提交到服务器保存旋转成功后 更新该 iframe 中的图片src等数据；
示例代码：
// 保存旋转后的图片 callback
function ROTATE_IMAGE_CALLBACK(iframeDocument) {
// 定位当前显示/处理的图片
var img = $('.image.active', iframeDocument).eq(0);
var src = img.attr('src');
// 如果同一页面里有多个需要预览的组，则需要在此处理需要提交到服务器的文件name，可自由发挥
// /wfjbdata/Files/13888638459_1493956330_1.jpg?ts=1498789451
// /Public/Resource/image/3C4909B8-6748-48D3-B70D-F0F3DFFCA4A0-1493956223/3C4909B8-6748-48D3-B70D-F0F3D56223b.jpg?ts=1498789286683
var re=[/(\d+_)+\d+\.\w+/i, /([\d\w]+\-)+[\d\w]+\.\w+/i];
var ma, name='', deg = 0;
for(var i=0,len=re.length; i<len; i++) {
if((ma=re[i].exec(src)) && ma[0]) {
name = ma[0];
break;
}
}
// 没取到名字
if(!name) {
alert('图片路径匹配失败，请检查后重试');
return false;
}
// 获取旋转角度
var className = img.attr('class').replace('image active', '');
if(className != '') {
deg = className.replace(' rotate', '').replace(' ', '');
}
console.log(name, deg);
// 提交服务器进行处理
$.ajax({
'url':"/index.php/Admin/Report/doRotate",
'type':"post",
'data':{
'name':name,
'deg':deg
},
'dataType':"json",
'success':function (data) {
// 如果检测到错误，匹配方法各个项目不一样
if(data == 'false') {
alert('图片旋转保存失败！');
return;
}
var ts=new Date().getTime();
// 将原始缩略图重新加载，并重置相关参数
// 定位原始缩略图
var imgThumb = $("img.gallery-pic[src*='" + name + "']").eq(0);
imgThumb.attr('src', '/Wfjbdata/Files/' + name + '?t=' + ts);
// 将本页中所有 img.image.active 的 src 中的 ts 替换为当前时间，以重新加载
$('img.image.active', iframeDocument).each(function (index, ele) {
ele=$(ele);
ele.attr({
'src':ele.attr('src').replace(/\?ts=\d+/i, '?ts=' + ts),
'class':ele.attr('class').replace(/\s*rotate\d+/i, '')
});
return true;
});
}
});
}
- 附上服务器端的处理代码，各个项目需要微调对图片路径的相关处理：
//处理图片旋转
public function doRotate() {
// 13888638459_1493956330_1.jpg
// 3C4909B8-6748-48D3-B70D-F0F3D56223b.jpg
$filename = I('name');
$degrees = -I('deg');
// 如果要在浏览器中直接显示图片，则需要设置 header
// header('Content-type: image/jpeg');
$realPath = VIDEO_PATH.$filename;
// 加载
$source = imagecreatefromjpeg($realPath);
// 旋转
$rotate = imagerotate($source, $degrees, 0);
// 输出
$res = Imagejpeg($rotate, $realPath, 100);
if ($res) {//保存图片
echo json_encode($filename);
}else{
echo json_encode('false');
}
imagedestroy($rotate);
}
