kl
3 years ago
8 changed files with 344 additions and 254 deletions
@ -0,0 +1,26 @@ |
|||||||
|
package cn.keking.service.impl; |
||||||
|
|
||||||
|
import cn.keking.model.FileAttribute; |
||||||
|
import cn.keking.service.FilePreview; |
||||||
|
import org.springframework.stereotype.Service; |
||||||
|
import org.springframework.ui.Model; |
||||||
|
|
||||||
|
/** |
||||||
|
* @author kl (http://kailing.pub)
|
||||||
|
* @since 2021/6/17 |
||||||
|
*/ |
||||||
|
@Service |
||||||
|
public class PptFilePreviewImpl implements FilePreview { |
||||||
|
|
||||||
|
private final OfficeFilePreviewImpl officeFilePreview; |
||||||
|
|
||||||
|
public PptFilePreviewImpl(OfficeFilePreviewImpl officeFilePreview) { |
||||||
|
this.officeFilePreview = officeFilePreview; |
||||||
|
} |
||||||
|
|
||||||
|
@Override |
||||||
|
public String filePreviewHandle(String url, Model model, FileAttribute fileAttribute) { |
||||||
|
officeFilePreview.filePreviewHandle(url,model,fileAttribute); |
||||||
|
return PPT_FILE_PREVIEW_PAGE; |
||||||
|
} |
||||||
|
} |
||||||
@ -1,4 +1,4 @@ |
|||||||
package cn.keking.service.impl; |
package cn.keking.utils; |
||||||
|
|
||||||
import java.io.BufferedReader; |
import java.io.BufferedReader; |
||||||
import java.io.File; |
import java.io.File; |
||||||
@ -1,258 +1,55 @@ |
|||||||
<#if RequestParameters['name']??> |
|
||||||
{ |
|
||||||
"code": 1, |
|
||||||
"name": "pptx", |
|
||||||
"totalSize": 0, |
|
||||||
"curPage": 1, |
|
||||||
"totalPage": 1, |
|
||||||
"pageSize": 10, |
|
||||||
"titles": null, |
|
||||||
"data": [ |
|
||||||
<#assign index = 0> |
|
||||||
<#list imgurls as img> |
|
||||||
<#if index != 0>,</#if>{ |
|
||||||
"uuid": null, |
|
||||||
"title": null, |
|
||||||
"content": null, |
|
||||||
"text": null, |
|
||||||
"url": "${img}", |
|
||||||
"destFile": null, |
|
||||||
"viewCount": 0, |
|
||||||
"downloadCount": 0, |
|
||||||
"ctime": null, |
|
||||||
"thumbUrl": "${img}", |
|
||||||
"largeUrl": null, |
|
||||||
"ratio": 0.5625, |
|
||||||
"note": null |
|
||||||
}<#assign index = index + 1> |
|
||||||
</#list>], |
|
||||||
"desc": "Success" |
|
||||||
} |
|
||||||
|
|
||||||
<#else/> |
|
||||||
<!DOCTYPE html> |
<!DOCTYPE html> |
||||||
<html lang="en"> |
<html lang="en"> |
||||||
<head> |
<head> |
||||||
<#if "${file.suffix?html}" == "ppt" || "${file.suffix?html}" == "pptx"> |
<meta charset="utf-8" /> |
||||||
<!DOCTYPE html> |
<title>PDF图片预览</title> |
||||||
|
<script src="js/lazyload.js"></script> |
||||||
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
|
||||||
|
|
||||||
<title>pptx</title> |
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
||||||
|
|
||||||
|
|
||||||
<!-- BOOTSTRAP STYLE start --> |
|
||||||
<!-- Le styles --> |
|
||||||
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
|
||||||
<link href="/pptx/bootstrap.min.css" rel="stylesheet"> |
|
||||||
|
|
||||||
<link href="/pptx/idocv_common.min.css" rel="stylesheet"> |
|
||||||
|
|
||||||
<link href="/pptx/jquery.contextMenu.css" rel="stylesheet"> |
|
||||||
|
|
||||||
<!-- BOOTSTRAP STYLE end --> |
|
||||||
|
|
||||||
<script type="text/javascript"> |
|
||||||
var windowWidth = document.documentElement.clientWidth; |
|
||||||
var searchStr = window.location.search.substr(1); |
|
||||||
if ((windowWidth < 768 || (/micromessenger/.test(navigator.userAgent.toLowerCase()))) && (!searchStr || searchStr.indexOf('type=') < 0)) { |
|
||||||
var redirectUrl = window.location.pathname + '?type=mobile' + (!!searchStr ? ('&' + searchStr) : ''); |
|
||||||
window.location.replace(redirectUrl); |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style type="text/css"> |
|
||||||
.thumbnail{ |
|
||||||
/* |
|
||||||
max-width: 200px; |
|
||||||
*/ |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
</style> |
|
||||||
|
|
||||||
<!--[if lt IE 9]> |
|
||||||
<script src="/static/bootstrap/js/html5shiv.js"></script> |
|
||||||
<![endif]--> |
|
||||||
|
|
||||||
</head> |
|
||||||
|
|
||||||
<body onload="resetImgSize();" class="ppt-body"> |
|
||||||
|
|
||||||
<div class="loading-mask" style="display: block;"> |
|
||||||
<div class="loading-zone"> |
|
||||||
<div class="text"><img src="/img/loader_indicator_lite.gif">加载中...</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="navbar navbar-inverse navbar-fixed-top"> |
|
||||||
<div class="navbar-inner"> |
|
||||||
<div class="container-fluid"> |
|
||||||
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> |
|
||||||
<span class="icon-bar"></span> |
|
||||||
<span class="icon-bar"></span> |
|
||||||
<span class="icon-bar"></span> |
|
||||||
</button> |
|
||||||
<!-- FILE NAME HERE --> |
|
||||||
<!-- SIGN UP & SIGN IN --> |
|
||||||
|
|
||||||
<div class="nav-collapse collapse"> |
|
||||||
<p class="navbar-text pull-right"> |
|
||||||
<a href="#" title="全屏" class="fullscreen-link"><i class="icon-fullscreen icon-white"></i></a> |
|
||||||
</p> |
|
||||||
</div><!--/.nav-collapse --> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="container-fluid" style="max-height: 100%;"> |
|
||||||
<div class="row-fluid"> |
|
||||||
<div class="span2 hidden-phone" style="position: fixed; top: 60px; left: 20px; bottom: 20px; padding-right: 10px; border-right: 3px solid #c8c8c8; max-height: 100%; overflow: auto; text-align: center;"> |
|
||||||
<!--Sidebar content--> |
|
||||||
<!-- |
|
||||||
<div class="thumbnail"> |
|
||||||
<img src=""> |
|
||||||
</div> |
|
||||||
1/20<br /> |
|
||||||
--> |
|
||||||
</div> |
|
||||||
<div class="span9 offset2"> |
|
||||||
<div class="slide-img-container"> |
|
||||||
<div class="ppt-turn-left-mask"></div> |
|
||||||
<div class="ppt-turn-right-mask"></div> |
|
||||||
<!-- |
|
||||||
<img src="" class="img-polaroid" style="max-height: 100%;"> |
|
||||||
--> |
|
||||||
</div> |
|
||||||
<!-- ONLY AVAILABLE ON MOBILE --> |
|
||||||
<div class="span12 visible-phone text-center" style="position: fixed; bottom: 10px; left: 0px; z-index: 1000;"> |
|
||||||
<select class="select-page-selector span1" style="width: 80px; margin-top: 10px;"> |
|
||||||
<!-- PAGE NUMBERS HERE --> |
|
||||||
</select> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="progress progress-striped active bottom-paging-progress"> |
|
||||||
<div class="bar" style="width: 0%;"></div> |
|
||||||
</div> |
|
||||||
<!-- JavaSript |
|
||||||
================================================== --> |
|
||||||
|
|
||||||
<script src="/pptx/jquery-3.5.1.min.js"></script> |
|
||||||
<script src="/pptx/jquery.contextMenu.js?v=11.2.5_20210128"></script> |
|
||||||
<script src="/pptx/idocv_common.min.js"></script> |
|
||||||
|
|
||||||
<script> |
|
||||||
var contextPath = ''; |
|
||||||
var version = '12'; |
|
||||||
// var urlObj = $.url($.url().attr('source').replace(contextPath, ''));
|
|
||||||
var id = window.location.pathname.replace(contextPath, '').split('/')[2]; |
|
||||||
var uuid = id; |
|
||||||
var params = getAllUrlParams(window.location.href); // 如果用urlObj.param()方法获取则被非正常解码
|
|
||||||
// var queryStr = urlObj.attr('query'); // 参数被decode，IE下如果有中文参数则报错，需要获取原生参数
|
|
||||||
var queryStr = window.location.search.slice(1); |
|
||||||
uuid = !!'' ? '' : uuid; |
|
||||||
var name = 'pptx'; |
|
||||||
if (!!name) { |
|
||||||
params.name = name; |
|
||||||
} |
|
||||||
var reqUrl = ''; |
|
||||||
var reqUrlMd5 = ''; |
|
||||||
var authMap = '{}'; |
|
||||||
var authMapStr = 'null'; |
|
||||||
if (!!reqUrlMd5 && !!authMapStr) { |
|
||||||
authMap = JSON.parse(authMapStr); |
|
||||||
} |
|
||||||
</script> |
|
||||||
<!-- 客户自定义JS --> |
|
||||||
<script src="/pptx/jquery.mobile-events.min.js"></script> |
|
||||||
<script src="/pptx/ppt.js"></script> |
|
||||||
</body> |
|
||||||
</html> |
|
||||||
<#else/> |
|
||||||
|
|
||||||
<meta charset="utf-8" /> |
|
||||||
<title>图片预览</title> |
|
||||||
<link rel="stylesheet" href="css/viewer.min.css"> |
|
||||||
<script src="js/lazyload.js"></script> |
|
||||||
<script src="js/viewer.min.js"></script> |
|
||||||
<#include "*/commonHeader.ftl"> |
<#include "*/commonHeader.ftl"> |
||||||
<style> |
<style> |
||||||
body { |
body { |
||||||
background-color: #404040; |
background-color: #404040; |
||||||
} |
} |
||||||
#image { width: 800px; margin: 0 auto; font-size: 0;} |
.container { |
||||||
#image li { display: inline-block;width: 50px;height: 50px; margin-left: 1%; padding-top: 1%;} |
width: 100%; |
||||||
/*#dowebok li img { width: 200%;}*/ |
height: 100%; |
||||||
|
} |
||||||
|
.img-area { |
||||||
|
text-align: center |
||||||
|
} |
||||||
|
|
||||||
</style> |
</style> |
||||||
</head> |
</head> |
||||||
<body> |
<body> |
||||||
<div class="container"> |
<div class="container"> |
||||||
<ul id="image"> |
|
||||||
<#list imgurls as img> |
<#list imgurls as img> |
||||||
<div class="img-area"> |
<div class="img-area"> |
||||||
<li><img id="${img}" url="${img}" src="${img}" width="1px" height="1px"></li> |
<img class="my-photo" alt="loading" data-src="${img}" src="images/loading.gif"> |
||||||
</div> |
</div> |
||||||
</#list> |
</#list> |
||||||
</ul> |
|
||||||
</div> |
</div> |
||||||
|
<#if "false" == switchDisabled> |
||||||
|
<img src="images/pdf.svg" width="63" height="63" style="position: fixed; cursor: pointer; top: 40%; right: 48px; z-index: 999;" alt="使用PDF预览" title="使用PDF预览" onclick="changePreviewType('pdf')"/> |
||||||
|
</#if> |
||||||
<script> |
<script> |
||||||
var viewer = new Viewer(document.getElementById('image'), { |
window.onload = function () { |
||||||
url: 'src', |
/*初始化水印*/ |
||||||
navbar: false, |
|
||||||
button: false, |
|
||||||
backdrop: false, |
|
||||||
loop : true |
|
||||||
}); |
|
||||||
document.getElementById("${currentUrl}").click(); |
|
||||||
// 修改下一页按钮的样式和位置
|
|
||||||
$(function () { |
|
||||||
var outHandler = function(){ |
|
||||||
$(this).css('background-color','rgba(0, 0, 0, 0)'); |
|
||||||
}; |
|
||||||
var overHandler = function(){ |
|
||||||
$(this).css('background-color','rgba(0, 0, 0, .5)'); |
|
||||||
}; |
|
||||||
var next = $("li[data-action=next]"); |
|
||||||
var prev = $("li[data-action=prev]"); |
|
||||||
var viewerToolBar = $(".viewer-footer"); |
|
||||||
// 覆盖按钮父类原始样式
|
|
||||||
viewerToolBar.css("overflow", "visible"); |
|
||||||
// 获取文档高度、宽度
|
|
||||||
var clientHeight = window.innerHeight; |
|
||||||
var clientWidth = window.innerWidth; |
|
||||||
// 调整样式
|
|
||||||
var styleCss = {},nextCss={},prevCss={}; |
|
||||||
styleCss.position = "absolute"; |
|
||||||
styleCss.top = -clientHeight; |
|
||||||
styleCss.width = clientWidth*0.1; |
|
||||||
styleCss.height = clientHeight + 52; |
|
||||||
// 覆盖原始样式
|
|
||||||
styleCss.backgroundColor='rgba(0, 0, 0, 0)'; |
|
||||||
styleCss.borderRadius='inherit'; |
|
||||||
nextCss.right = "0"; |
|
||||||
prevCss.left = "0"; |
|
||||||
next.css($.extend(nextCss, styleCss)); |
|
||||||
prev.css($.extend(prevCss, styleCss)); |
|
||||||
next.on('mouseout',outHandler); |
|
||||||
next.on('mouseover',overHandler); |
|
||||||
prev.on('mouseout',outHandler); |
|
||||||
prev.on('mouseover',overHandler); |
|
||||||
}); |
|
||||||
/*初始化水印*/ |
|
||||||
window.onload = function() { |
|
||||||
initWaterMark(); |
initWaterMark(); |
||||||
|
checkImgs(); |
||||||
|
}; |
||||||
|
window.onscroll = throttle(checkImgs); |
||||||
|
function changePreviewType(previewType) { |
||||||
|
var url = window.location.href; |
||||||
|
if (url.indexOf("officePreviewType=image") !== -1) { |
||||||
|
url = url.replace("officePreviewType=image", "officePreviewType="+previewType); |
||||||
|
} else { |
||||||
|
url = url + "&officePreviewType="+previewType; |
||||||
|
} |
||||||
|
if ('allImages' === previewType) { |
||||||
|
window.open(url) |
||||||
|
} else { |
||||||
|
window.location.href = url; |
||||||
|
} |
||||||
} |
} |
||||||
</script> |
</script> |
||||||
|
|
||||||
</#if> |
|
||||||
</body> |
</body> |
||||||
</html> |
</html> |
||||||
</#if> |
|
||||||
@ -0,0 +1,258 @@ |
|||||||
|
<#if RequestParameters['name']??> |
||||||
|
{ |
||||||
|
"code": 1, |
||||||
|
"name": "pptx", |
||||||
|
"totalSize": 0, |
||||||
|
"curPage": 1, |
||||||
|
"totalPage": 1, |
||||||
|
"pageSize": 10, |
||||||
|
"titles": null, |
||||||
|
"data": [ |
||||||
|
<#assign index = 0> |
||||||
|
<#list imgurls as img> |
||||||
|
<#if index != 0>,</#if>{ |
||||||
|
"uuid": null, |
||||||
|
"title": null, |
||||||
|
"content": null, |
||||||
|
"text": null, |
||||||
|
"url": "${img}", |
||||||
|
"destFile": null, |
||||||
|
"viewCount": 0, |
||||||
|
"downloadCount": 0, |
||||||
|
"ctime": null, |
||||||
|
"thumbUrl": "${img}", |
||||||
|
"largeUrl": null, |
||||||
|
"ratio": 0.5625, |
||||||
|
"note": null |
||||||
|
}<#assign index = index + 1> |
||||||
|
</#list>], |
||||||
|
"desc": "Success" |
||||||
|
} |
||||||
|
|
||||||
|
<#else/> |
||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="en"> |
||||||
|
<head> |
||||||
|
<#if "${file.suffix?html}" == "ppt" || "${file.suffix?html}" == "pptx"> |
||||||
|
<!DOCTYPE html> |
||||||
|
|
||||||
|
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
||||||
|
|
||||||
|
<title>pptx</title> |
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||||
|
|
||||||
|
|
||||||
|
<!-- BOOTSTRAP STYLE start --> |
||||||
|
<!-- Le styles --> |
||||||
|
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
||||||
|
<link href="/pptx/bootstrap.min.css" rel="stylesheet"> |
||||||
|
|
||||||
|
<link href="/pptx/idocv_common.min.css" rel="stylesheet"> |
||||||
|
|
||||||
|
<link href="/pptx/jquery.contextMenu.css" rel="stylesheet"> |
||||||
|
|
||||||
|
<!-- BOOTSTRAP STYLE end --> |
||||||
|
|
||||||
|
<script type="text/javascript"> |
||||||
|
var windowWidth = document.documentElement.clientWidth; |
||||||
|
var searchStr = window.location.search.substr(1); |
||||||
|
if ((windowWidth < 768 || (/micromessenger/.test(navigator.userAgent.toLowerCase()))) && (!searchStr || searchStr.indexOf('type=') < 0)) { |
||||||
|
var redirectUrl = window.location.pathname + '?type=mobile' + (!!searchStr ? ('&' + searchStr) : ''); |
||||||
|
window.location.replace(redirectUrl); |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style type="text/css"> |
||||||
|
.thumbnail{ |
||||||
|
/* |
||||||
|
max-width: 200px; |
||||||
|
*/ |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
</style> |
||||||
|
|
||||||
|
<!--[if lt IE 9]> |
||||||
|
<script src="/static/bootstrap/js/html5shiv.js"></script> |
||||||
|
<![endif]--> |
||||||
|
|
||||||
|
</head> |
||||||
|
|
||||||
|
<body onload="resetImgSize();" class="ppt-body"> |
||||||
|
|
||||||
|
<div class="loading-mask" style="display: block;"> |
||||||
|
<div class="loading-zone"> |
||||||
|
<div class="text"><img src="/img/loader_indicator_lite.gif">加载中...</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="navbar navbar-inverse navbar-fixed-top"> |
||||||
|
<div class="navbar-inner"> |
||||||
|
<div class="container-fluid"> |
||||||
|
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> |
||||||
|
<span class="icon-bar"></span> |
||||||
|
<span class="icon-bar"></span> |
||||||
|
<span class="icon-bar"></span> |
||||||
|
</button> |
||||||
|
<!-- FILE NAME HERE --> |
||||||
|
<!-- SIGN UP & SIGN IN --> |
||||||
|
|
||||||
|
<div class="nav-collapse collapse"> |
||||||
|
<p class="navbar-text pull-right"> |
||||||
|
<a href="#" title="全屏" class="fullscreen-link"><i class="icon-fullscreen icon-white"></i></a> |
||||||
|
</p> |
||||||
|
</div><!--/.nav-collapse --> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="container-fluid" style="max-height: 100%;"> |
||||||
|
<div class="row-fluid"> |
||||||
|
<div class="span2 hidden-phone" style="position: fixed; top: 60px; left: 20px; bottom: 20px; padding-right: 10px; border-right: 3px solid #c8c8c8; max-height: 100%; overflow: auto; text-align: center;"> |
||||||
|
<!--Sidebar content--> |
||||||
|
<!-- |
||||||
|
<div class="thumbnail"> |
||||||
|
<img src=""> |
||||||
|
</div> |
||||||
|
1/20<br /> |
||||||
|
--> |
||||||
|
</div> |
||||||
|
<div class="span9 offset2"> |
||||||
|
<div class="slide-img-container"> |
||||||
|
<div class="ppt-turn-left-mask"></div> |
||||||
|
<div class="ppt-turn-right-mask"></div> |
||||||
|
<!-- |
||||||
|
<img src="" class="img-polaroid" style="max-height: 100%;"> |
||||||
|
--> |
||||||
|
</div> |
||||||
|
<!-- ONLY AVAILABLE ON MOBILE --> |
||||||
|
<div class="span12 visible-phone text-center" style="position: fixed; bottom: 10px; left: 0px; z-index: 1000;"> |
||||||
|
<select class="select-page-selector span1" style="width: 80px; margin-top: 10px;"> |
||||||
|
<!-- PAGE NUMBERS HERE --> |
||||||
|
</select> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="progress progress-striped active bottom-paging-progress"> |
||||||
|
<div class="bar" style="width: 0%;"></div> |
||||||
|
</div> |
||||||
|
<!-- JavaSript |
||||||
|
================================================== --> |
||||||
|
|
||||||
|
<script src="/pptx/jquery-3.5.1.min.js"></script> |
||||||
|
<script src="/pptx/jquery.contextMenu.js?v=11.2.5_20210128"></script> |
||||||
|
<script src="/pptx/idocv_common.min.js"></script> |
||||||
|
|
||||||
|
<script> |
||||||
|
var contextPath = ''; |
||||||
|
var version = '12'; |
||||||
|
// var urlObj = $.url($.url().attr('source').replace(contextPath, ''));
|
||||||
|
var id = window.location.pathname.replace(contextPath, '').split('/')[2]; |
||||||
|
var uuid = id; |
||||||
|
var params = getAllUrlParams(window.location.href); // 如果用urlObj.param()方法获取则被非正常解码
|
||||||
|
// var queryStr = urlObj.attr('query'); // 参数被decode，IE下如果有中文参数则报错，需要获取原生参数
|
||||||
|
var queryStr = window.location.search.slice(1); |
||||||
|
uuid = !!'' ? '' : uuid; |
||||||
|
var name = 'pptx'; |
||||||
|
if (!!name) { |
||||||
|
params.name = name; |
||||||
|
} |
||||||
|
var reqUrl = ''; |
||||||
|
var reqUrlMd5 = ''; |
||||||
|
var authMap = '{}'; |
||||||
|
var authMapStr = 'null'; |
||||||
|
if (!!reqUrlMd5 && !!authMapStr) { |
||||||
|
authMap = JSON.parse(authMapStr); |
||||||
|
} |
||||||
|
</script> |
||||||
|
<!-- 客户自定义JS --> |
||||||
|
<script src="/pptx/jquery.mobile-events.min.js"></script> |
||||||
|
<script src="/pptx/ppt.js"></script> |
||||||
|
</body> |
||||||
|
</html> |
||||||
|
<#else/> |
||||||
|
|
||||||
|
<meta charset="utf-8" /> |
||||||
|
<title>图片预览</title> |
||||||
|
<link rel="stylesheet" href="css/viewer.min.css"> |
||||||
|
<script src="js/lazyload.js"></script> |
||||||
|
<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> |
||||||
|
<div class="container"> |
||||||
|
<ul id="image"> |
||||||
|
<#list imgurls as img> |
||||||
|
<div class="img-area"> |
||||||
|
<li><img id="${img}" url="${img}" src="${img}" width="1px" height="1px"></li> |
||||||
|
</div> |
||||||
|
</#list> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script> |
||||||
|
var viewer = new Viewer(document.getElementById('image'), { |
||||||
|
url: 'src', |
||||||
|
navbar: false, |
||||||
|
button: false, |
||||||
|
backdrop: false, |
||||||
|
loop : true |
||||||
|
}); |
||||||
|
document.getElementById("${currentUrl}").click(); |
||||||
|
// 修改下一页按钮的样式和位置
|
||||||
|
$(function () { |
||||||
|
var outHandler = function(){ |
||||||
|
$(this).css('background-color','rgba(0, 0, 0, 0)'); |
||||||
|
}; |
||||||
|
var overHandler = function(){ |
||||||
|
$(this).css('background-color','rgba(0, 0, 0, .5)'); |
||||||
|
}; |
||||||
|
var next = $("li[data-action=next]"); |
||||||
|
var prev = $("li[data-action=prev]"); |
||||||
|
var viewerToolBar = $(".viewer-footer"); |
||||||
|
// 覆盖按钮父类原始样式
|
||||||
|
viewerToolBar.css("overflow", "visible"); |
||||||
|
// 获取文档高度、宽度
|
||||||
|
var clientHeight = window.innerHeight; |
||||||
|
var clientWidth = window.innerWidth; |
||||||
|
// 调整样式
|
||||||
|
var styleCss = {},nextCss={},prevCss={}; |
||||||
|
styleCss.position = "absolute"; |
||||||
|
styleCss.top = -clientHeight; |
||||||
|
styleCss.width = clientWidth*0.1; |
||||||
|
styleCss.height = clientHeight + 52; |
||||||
|
// 覆盖原始样式
|
||||||
|
styleCss.backgroundColor='rgba(0, 0, 0, 0)'; |
||||||
|
styleCss.borderRadius='inherit'; |
||||||
|
nextCss.right = "0"; |
||||||
|
prevCss.left = "0"; |
||||||
|
next.css($.extend(nextCss, styleCss)); |
||||||
|
prev.css($.extend(prevCss, styleCss)); |
||||||
|
next.on('mouseout',outHandler); |
||||||
|
next.on('mouseover',overHandler); |
||||||
|
prev.on('mouseout',outHandler); |
||||||
|
prev.on('mouseover',overHandler); |
||||||
|
}); |
||||||
|
/*初始化水印*/ |
||||||
|
window.onload = function() { |
||||||
|
initWaterMark(); |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
</#if> |
||||||
|
</body> |
||||||
|
</html> |
||||||
|
</#if> |
||||||
Loading…
Reference in new issue