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

最新推荐文章于 2025-02-18 13:47:36 发布

戈壁楼兰

最新推荐文章于 2025-02-18 13:47:36 发布

阅读量8.4k

点赞数 2

分类专栏： Layui前端框架文章标签： layui.open 图片预览视频预览

本文链接：https://blog.youkuaiyun.com/bananasssss/article/details/96132275

版权

Layui前端框架专栏收录该内容

3 篇文章

订阅专栏

该博客介绍了如何利用Layui的open方法进行图片和视频的预览。在图片预览中，特别提到当图片为长图时，通过在imgHtml外部添加div可以改善预览体验，提供良好的滚动预览效果。同时，文章也提及了视频预览的相关内容以及后台设置的必要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图片预览

注：imgHtml 外部不加div时，如果图片是一张长图，则预览效果非常不好，加了div弹出层有滚动条，可以很方便的预览长图。
https://www.layui.com/doc/modules/layer.html

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);