Layui.open弹出图片及视频预览

图片预览

注：imgHtml 外部不加div时，如果图片是一张长图，则预览效果非常不好，加了div弹出层有滚动条，可以很方便的预览长图。

function previewImg(obj) {
          
   
        var img = new Image();
        img.src = obj.src;
        //var height = img.height + 50; // 原图片大小
        //var width = img.width; //原图片大小
        var imgHtml = "<img src=" + obj.src + " style=width:auto;height:auto; max-width:100%;max-height:100%;/>";
        //弹出层
        layer.open({
          
   
            type: 1,
            shade: 0.8,
            offset: auto,
            area: [400 + px,550+px],  // area: [width + px,height+px]  //原图显示
            shadeClose:true,
            scrollbar: false,
            title: "图片预览", //显示标题
            content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            cancel: function () {
          
   
                //layer.msg(捕获就是从页面已经存在的元素上，包裹layer的结构, { time: 5000, icon: 6 });
            }
        });
    }

视频预览

function previewVideo(url) {
          
   
        var html = <div class="wrap">;
        html += <video  height="500" controls autobuffer>;
        html += <source src="+url+" type="video/mp4" />;
        html += </video>;
        html += </div>;
        //弹出层
        layer.open({
          
   
            type: 1,
            skin: layui-layer-rim, //加上边框
            title: "视频预览",
            content: html
        });
    }

后台设置

foreach ($dataList as &$val) {
          
   
	//图片
	$imgIst = !empty($val[img_json]) ? json_decode($val[img_json]) : array();
	$newImgIst = ;
	if(count($imgIst) > 0) {
          
   
		foreach ($imgIst as $ka => $va) {
          
   
			$newImgIst = $newImgIst . "<img class=layui-upload-img src=" . $va . "  width=40px height=40px οnclick=previewImg(this)/>";
		}
	}
	$val[img_lst] = $newImgIst;

	//视频 <i class=layui-icon layui-icon-video></i>显示layui中的视频小图标
	$url = $val[video];
	$val[video] = !empty($val[video]) ? " <div><span data-url=" . $val[video] . " οnclick=previewVideo("$url")><i class=layui-icon layui-icon-video></i></span></div>" : ;
}
unset($val);