picture.ftl 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>图片预览</title>
  6. <#include "*/commonHeader.ftl">
  7. <link rel="stylesheet" href="css/viewer.min.css">
  8. <script src="js/viewer.min.js"></script>
  9. <style>
  10. body {
  11. background-color: #404040;
  12. }
  13. #image { width: 800px; margin: 0 auto; font-size: 0;}
  14. #image li { display: inline-block;width: 50px;height: 50px; margin-left: 1%; padding-top: 1%;}
  15. /*#dowebok li img { width: 200%;}*/
  16. </style>
  17. </head>
  18. <body>
  19. <ul id="image">
  20. <#list imgUrls as img>
  21. <#if img?contains("http://") || img?contains("https://")>
  22. <#assign img="${img}">
  23. <#else>
  24. <#assign img="${baseUrl}${img}">
  25. </#if>
  26. <li><img id="${img}" url="${img}" src="${img}" style="display: none"></li>
  27. </#list>
  28. </ul>
  29. <script>
  30. var viewer = new Viewer(document.getElementById('image'), {
  31. url: 'src',
  32. navbar: false,
  33. button: false,
  34. backdrop: false,
  35. loop : true
  36. });
  37. document.getElementById("${currentUrl}").click();
  38. /*初始化水印*/
  39. window.onload = function() {
  40. initWaterMark();
  41. }
  42. </script>
  43. </body>
  44. </html>