picture.ftl 1.35 KB
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>图片预览</title>
    <link rel="stylesheet" href="css/viewer.min.css">
    <script src="js/viewer.min.js"></script>
    <#include "*/commonHeader.ftl">
    <style>
        body {
            background-color: #404040;
        }
        #image { width: 800px; margin: 0 auto; font-size: 0;}
        #image li {  display: inline-block;width: 50px;height: 50px; margin-left: 1%; padding-top: 1%;}
        /*#dowebok li img { width: 200%;}*/
    </style>
</head>
<body>
<#if file.folderName?exists&&file.updateTime?exists >
    <#include "*/commonFileInfoHeader.ftl">
</#if>
<ul id="image">
    <#list imgUrls as img>
        <#if img?contains("http://") || img?contains("https://")>
            <#assign img="${img}">
        <#else>
            <#assign imgSrc="${baseUrl}${getPreviewFile}${img}?token=${token}">
        </#if>
        <li><img id="${img}"  url="${imgSrc}" src="${imgSrc}" width="1px" height="1px"></li>
    </#list>
</ul>

<script>
    var viewer = new Viewer(document.getElementById('image'), {
        url: 'src',
        navbar: false,
        button: false,
        backdrop: false,
        loop : true
    });
    document.getElementById("${currentUrl}").click();

    /*初始化水印*/
    window.onload = function() {
        initWaterMark();
    }
</script>
</body>

</html>