的一些简单使用

时间：2025-03-21 08:34:56

在项目中引入(这里使用的是js版本)

<link rel="stylesheet" href="css/">
<script src="js/"></script>

HTML

	<ul >
        <c:forEach var="x" items="${projectCaseImageList}">
            <li>
                <img hidden src="${}" title="${}.${}" alt="${}.${}"/>
            </li>
        </c:forEach>
    </ul>

javascript`

var viewer = new Viewer(('jq22'), {
    url: 'data-original',  	//设置大图片的 url
    rotatable:false,		
    scalable:false,			
});

另外由于这边的需求是直接全屏显示，所以我这边的办法是首先先打开一个新窗口,然后在这个页面隐藏一个按钮，最后页面加载时给点击事件

 <a type="hidden" id="btn1" click="show(this);" >show()</a>
 
    $(function () {
        var viewer = new Viewer(('jq22'), {
            url: 'data-original',
            rotatable:false,
            scalable:false,
            setTimeout(function() {
                // IE浏览器
                if() {
                    ('btn1').onclick = function() {
                        viewer.show();
                    }
                }
                // 其它浏览器
                else {
                    var e = document.createEvent("MouseEvents");
                    e.initEvent("click", true, true);
                    document.getElementById("btn1").dispatchEvent(e);
                    viewer.show();
                }
            }, 0);
    });

这边的显示效果就是点击预览按钮，然后打开新窗口，页面全屏展示图片，

相关文章