Skip to content

S
slm-fileview
Commit 4f5b0f74 authored by gaoxiong's avatar gaoxiong Committed by kl
Browse files
Options

美化ppt图片显示

parent c5495084
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 652 additions and 35 deletions
server/src/main/resources/static/pptx/bootstrap.min.css 0 → 100644
View file @ 4f5b0f74
This source diff could not be displayed because it is too large. You can view the blob instead.
server/src/main/resources/static/pptx/idocv_common.min.css 0 → 100644
View file @ 4f5b0f74
.loading-mask{position:absolute;background-color:whiteSmoke;width:100%;height:100%;top:0;left:0;right:0;bottom:0;z-index:2000}.loading-mask .brand{position:absolute;width:100%;bottom:20px}.loading-mask .loading-zone{width:100%;max-width:300px;margin:100px auto}.loading-mask .loading-zone .progress{height:13px}.loading-mask .loading-zone .text{text-align:center;margin:5px auto}.loading-mask .loading-zone .text img{margin-right:10px}.loader{display:none;position:fixed;top:0;left:0;right:0;z-index:1500;text-align:center;font-size:20px;font-weight:200;color:#999;text-shadow:0 -1px 0 rgba(0,0,0,0.25);padding:10px 20px 0;background-image:linear-gradient(to bottom,#222,#111)}body{padding-top:60px;padding-bottom:40px;line-height:normal !important}.sidebar-nav{padding:9px 0}@media(max-width:980px){.navbar-text.pull-right{float:none;padding-left:5px;padding-right:5px}}.fileinput-button{position:relative;overflow:hidden;float:left;margin-right:4px}.fileinput-button input{position:absolute;top:0;right:0;margin:0;opacity:0;filter:alpha(opacity=0);transform:translate(-300px,0) scale(4);font-size:23px;direction:ltr;cursor:pointer}.navbar .brand{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:80%}.highlight{background-color:#ff8}.highlight-selected{background-color:darkorange}.word-body,.ppt-body{background-color:#ebebeb;min-height:100%;-webkit-font-smoothing:antialiased;font-smoothing:antialiased;text-rendering:optimizeLegibility}.word-body table{width:auto !important}.word-body .word-page .word-content a{color:inherit !important}body .container-fluid .span12 .tab-content table a{color:inherit !important}.word-page{line-height:normal;margin-right:auto;margin-left:auto;margin-bottom:15px;max-width:795px;background-color:#FFF;-moz-border-radius:1px;border-radius:1px;-moz-box-shadow:0 0 10px 5px #888;-webkit-box-shadow:0 0 10px 5px #888;box-shadow:0 0 10px 5px #888}.word-page .word-content{position:relative;background-color:#FFF;max-width:75%;word-wrap:break-word;word-break:normal;text-align:justify;margin:0 auto;padding-top:10%;padding-bottom:150px}.doc-page .doc-content p{word-wrap:break-word;word-break:normal;margin:0}span.msoIns,span.msoIns ins{mso-style-name:"批注插入";text-decoration:none}span.msoDel,span.msoDel ins{mso-style-name:"批注删除";display:none}.slide-img-container{margin:0 auto;bottom:20px;top:0;right:5px;padding-bottom:10px;position:relative;width:100%;text-align:center}.slide-img-container img{-moz-border-radius:5px;border-radius:2px;-moz-box-shadow:0 0 10px 3px #888;-webkit-box-shadow:0 0 10px 3px #888;box-shadow:0 0 10px 3px #888}.slide-img-container-sync{margin:0 auto;bottom:20px;top:0;right:5px;padding-bottom:10px;position:relative;width:100%;text-align:center}.slide-img-container-sync img{-moz-border-radius:5px;border-radius:2px;-moz-box-shadow:0 0 10px 3px #888;-webkit-box-shadow:0 0 10px 3px #888;box-shadow:0 0 10px 3px #888}.ppt-thumb-border{border:3px solid darkorange}.ppt-turn-left-mask,.ppt-turn-right-mask{position:absolute;width:50%;height:100%;top:0;left:0;z-index:500;cursor:url("../img/arr_left.cur"),auto;display:block}.ppt-turn-right-mask{left:50%;right:0;cursor:url("../img/arr_right.cur"),auto}#cursors{position:relative}#cursors .cursor{position:absolute;width:15px;height:22px;background:url('/static/draw/img/pointer.png') no-repeat -4px 0}.pdf-body{background-color:#ebebeb;min-height:100%;-webkit-font-smoothing:antialiased;font-smoothing:antialiased;text-rendering:optimizeLegibility}.pdf-page{line-height:normal;margin-right:auto;margin-left:auto;margin-bottom:15px;max-width:795px;background-color:#FFF;-moz-border-radius:1px;border-radius:1px;-moz-box-shadow:0 0 10px 5px #888;-webkit-box-shadow:0 0 10px 5px #888;box-shadow:0 0 10px 5px #888;text-align:center}.pdf-page .pdf-content{position:relative;background-color:#FFF;word-wrap:break-word;word-break:break-all;margin:0 auto}table{border-collapse:collapse;word-wrap:break-word;margin:0 auto}#back-to-top,.touch-device #back-to-top:hover{background:url(../img/arrow-up-large.png) no-repeat center center;background-color:#ddd;background-color:rgba(221,221,221,.7);bottom:20px;color:transparent;display:none;font:0/0 a;height:46px;position:fixed;right:20px;text-shadow:none;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-ms-transition:all .2s ease;-o-transition:all .2s ease;transition:all .2s ease;width:45px;z-index:3000}#back-to-top:hover,.touch-device #back-to-top:active{background-color:#f15a23}footer{text-align:center}.bottom-paging-progress{position:fixed;width:100%;bottom:0;left:0;margin:0 auto;height:3px}.paging-bottom-all{border-top:1px solid #d8d8d8;height:20px;position:fixed;bottom:0;left:0;right:0;width:100%;cursor:pointer}.paging-bottom-sub{float:left;display:inline-block;text-align:center;height:20px;font-weight:bold;color:green}@media(max-width:767px){.navbar .brand{max-width:55%}.word-page .word-content{max-width:85%}.word-body .container-fluid-content{padding-left:0;padding-right:0}.word-body,.ppt-body,.pdf-body{background-color:#FFF}.word-page{-moz-box-shadow:0 0 10px 5px #FFF;-webkit-box-shadow:0 0 0 0 #FFF;box-shadow:0 0 0 0 #FFF}.pdf-body .container-fluid-content{padding-left:0;padding-right:0}}.alert-error{text-align:center}
\ No newline at end of file
server/src/main/resources/static/pptx/idocv_common.min.js 0 → 100644
View file @ 4f5b0f74
This diff is collapsed.
server/src/main/resources/static/pptx/jquery-3.5.1.min.js 0 → 100644
View file @ 4f5b0f74
This diff is collapsed.
server/src/main/resources/static/pptx/jquery.contextMenu.css 0 → 100644
View file @ 4f5b0f74
/*!
* jQuery contextMenu - Plugin for simple contextMenu handling
*
* Version: git-master
*
* Authors: Rodney Rehm, Addy Osmani (patches for FF)
* Web: http://medialize.github.com/jQuery-contextMenu/
*
* Licensed under
* MIT License http://www.opensource.org/licenses/mit-license
* GPL v3 http://opensource.org/licenses/GPL-3.0
*
*/
.context-menu-list {
margin:0;
padding:0;
min-width: 120px;
max-width: 250px;
display: inline-block;
position: absolute;
list-style-type: none;
border: 1px solid #DDD;
background: #EEE;
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
-ms-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
-o-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
.context-menu-item {
padding: 2px 2px 2px 24px;
background-color: #EEE;
position: relative;
-webkit-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
}
.context-menu-separator {
padding-bottom:0;
border-bottom: 1px solid #DDD;
}
.context-menu-item > label > input,
.context-menu-item > label > textarea {
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
.context-menu-item.hover {
cursor: pointer;
background-color: #39F;
}
.context-menu-item.disabled {
color: #666;
}
.context-menu-input.hover,
.context-menu-item.disabled.hover {
cursor: default;
background-color: #EEE;
}
.context-menu-submenu:after {
content: ">";
color: #666;
position: absolute;
top: 0;
right: 3px;
z-index: 1;
}
/* icons
#protip:
In case you want to use sprites for icons (which I would suggest you do) have a look at
http://css-tricks.com/13224-pseudo-spriting/ to get an idea of how to implement
.context-menu-item.icon:before {}
*/
.context-menu-item.icon { min-height: 18px; background-repeat: no-repeat; background-position: 4px 2px; }
.context-menu-item.icon-edit { background-image: url(images/page_white_edit.png); }
.context-menu-item.icon-cut { background-image: url(images/cut.png); }
.context-menu-item.icon-copy { background-image: url(images/page_white_copy.png); }
.context-menu-item.icon-paste { background-image: url(images/page_white_paste.png); }
.context-menu-item.icon-delete { background-image: url(images/page_white_delete.png); }
.context-menu-item.icon-add { background-image: url(images/page_white_add.png); }
.context-menu-item.icon-quit { background-image: url(images/door.png); }
/* vertically align inside labels */
.context-menu-input > label > * { vertical-align: top; }
/* position checkboxes and radios as icons */
.context-menu-input > label > input[type="checkbox"],
.context-menu-input > label > input[type="radio"] {
margin-left: -17px;
}
.context-menu-input > label > span {
margin-left: 5px;
}
.context-menu-input > label,
.context-menu-input > label > input[type="text"],
.context-menu-input > label > textarea,
.context-menu-input > label > select {
display: block;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
.context-menu-input > label > textarea {
height: 100px;
}
.context-menu-item > .context-menu-list {
display: none;
/* re-positioned by js */
right: -5px;
top: 5px;
}
.context-menu-item.hover > .context-menu-list {
display: block;
}
.context-menu-accesskey {
text-decoration: underline;
}
server/src/main/resources/static/pptx/jquery.contextMenu.js 0 → 100644
View file @ 4f5b0f74
This diff is collapsed.
server/src/main/resources/static/pptx/ppt.js 0 → 100644
View file @ 4f5b0f74
/**
* Copyright 2013 I Doc View
* @author Godwin <I Doc View>
*/
var ratio = 0.75;
var pages;
var slideUrls = new Array();
var slideThumbUrls = new Array();
var curSlide = 1;
var totalSize = 1; // PPT当前获取到的总页数
var slideCount = 1; // PPT文件总页数
var size = (!!$.url().param('size') ? $.url().param('size') : 0);
$(document).ready(function() {
// async method:
$.get('onlinePreview?' , params, function(data, status) {
var data = JSON.parse(data);
//$.get('http://nw.runmin.net/url.json?start=1&size=0' + size, params, function(data, status) {
/* sync method, used by sync view (speaker & audience)
$.ajax({
type: "GET",
url: contextPath + '/view/' + uuid + '.json',
async: false,
dataType: "json",
data: params,
}).done(function( data ) {
*/
//console.log(data);
var viewCheck = authMap.view;
var downCheck = authMap.down;
var code = data.code;
if (1 == code) {
uuid = data.uuid;
pages = data.data;
totalSize = pages.length;
slideCount = data.totalSize;
// title
$('.container-fluid:first .btn:first').after('<a class="brand lnk-file-title" style="text-decoration: none;" href="' + contextPath + '/doc/download/' + uuid + (!!queryStr ? '?' + queryStr : '') + '" title="' + data.name + '">' + data.name + '</a>');
document.title = data.name;
// set ratio
ratio = pages[0].ratio;
// reset all content
resetContent();
afterLoad();
} else {
$('.container-fluid .row-fluid').html('<section><div class="alert alert-error">' + data.desc + '</div></section>');
}
clearProgress();
});
// 是否显示全屏按钮
$('.fullscreen-link').toggle(screenfull.enabled);
// 全屏事件
$('.fullscreen-link').click(function(){
if (screenfull.enabled) {
screenfull.toggle($('.slide-img-container')[0]);
}
});
$(document).bind("fullscreenchange", function() {
if (screenfull.isFullscreen) {
$('.slide-img-container').css('background-color', 'black');
$('.slide-img-container').contextMenu(true);
} else {
$('.slide-img-container').css('background-color', '');
$('.slide-img-container').contextMenu(false);
}
});
$('.select-page-selector').change(function() {
var selectNum = $(".select-page-selector option:selected").text();
gotoSlide(selectNum);
});
$('.slide-img-container .ppt-turn-left-mask').click(function () {
preSlide();
});
$('.slide-img-container .ppt-turn-right-mask').click(function () {
nextSlide();
});
// Right click (NOT supported in SOUGOU browser)
/*
$.contextMenu({
selector: '.slide-img-container',
items: {
"next": {
name: "下一张",
callback: function(key, options) {
nextSlide();
}
},
"previous": {
name: "上一张",
callback: function(key, options) {
preSlide();
}
},
"sep1": "---------",
"exit": {
name: "结束放映",
callback: function(key, options) {
$('.slide-img-container').fullScreen(false);
}
},
}
});
*/
$('.slide-img-container').contextMenu(false);
// Swipe method is NOT supported in IE6, so it should be the last one.
try {
$('.slide-img-container').swipeleft(function() { nextSlide(); });
$('.slide-img-container').swiperight(function() { preSlide(); });
} catch (err) {
}
});
var remainContentInterval;
function checkRemainContent () {
clearInterval(remainContentInterval);
if (slideCount == totalSize) {
return;
}
}
function resetContent() {
remainContentInterval = setInterval(checkRemainContent, 8000);
// clear all content
$('.row-fluid .span2').empty();
$('.select-page-selector').empty();
$('.select-page-selector-sync').empty();
$('.slide-img-container img').remove();
// 限制预览页数开始
var viewCheck = authMap.view;
if (!!viewCheck && (viewCheck > 1) && (pages.length > viewCheck)) {
$('.navbar').after('<div class="alert alert-info" style="text-align: center; color: red;">试读结束，支付后阅读全文！</div>');
totalSize = viewCheck;
clearInterval(remainContentInterval);
}
// 限制预览页数结束
// pages
for (i = 0; i < totalSize; i++) {
var page = pages[i];
slideUrls[i] = page.url;
slideThumbUrls[i] = page.thumbUrl;
$('.row-fluid .span2').append('<div class="thumbnail" page="' + (i + 1) + '"><img src="' + page.thumbUrl + '"></div><div class="thumb-page-number-container">' + (i + 1) + '/' + slideCount + '</div>');
$('.select-page-selector').append('<option>' + (i + 1) + '</option>');
$('.select-page-selector-sync').append('<option>' + (i + 1) + '</option>');
}
// 未转换完成提示信息
if (totalSize < slideCount) {
$('.row-fluid .span2').prepend('<div style="color: red;">转换中(' + Math.floor((totalSize / slideCount) * 100) + '%)，请稍候……</div>');
}
$('.slide-img-container').append('<img src="' + slideUrls[curSlide - 1] + '" class="img-polaroid" style="height: 100%;">');
var thumbnailWidth = $('.thumbnail:first').width();
var thumbnailHeight = thumbnailWidth * ratio;
$('.thumbnail').height(thumbnailHeight);
var slideImgContainerWidth = $('.slide-img-container:first').width();
var slideImgContainerHeight = slideImgContainerWidth * ratio;
$('.slide-img-container').height(slideImgContainerHeight);
resetImgSize();
var percent = Math.ceil((curSlide / slideUrls.length) * 100);
$('.thumbnail[page="' + curSlide + '"]').addClass('ppt-thumb-border');
// $('.thumbnail[page="' + curSlide + '"]').animate({scrollTop:($(window).height()/2)}, 'slow');
$('.select-page-selector').val(curSlide);
$('.bottom-paging-progress .bar').width('' + percent + '%');
$('.thumbnail').click(function () {
var page_num = $(this).attr('page');
gotoSlide(page_num);
});
}
$(window).resize(function() {
resetImgSize();
});
function resetImgSize() {
var leftW = $('.row-fluid .span2').width() + 40;
var windowW = $(window).width();
if (windowW < 768) {
leftW = -40;
$('.hidden-phone').css('display', 'none');
$('.span9').removeClass('offset2');
} else {
$('.hidden-phone').css('display', 'block');
$('.span9').addClass('offset2');
}
var ww = $(window).width() - 120 - leftW;
var wh = $(window).height() - 90;
if (screenfull.isFullscreen) {
ww = ww + 90 + leftW;
wh = wh + 80;
}
if (wh / ww < ratio) {
$('.slide-img-container').height(wh);
$('.slide-img-container').width(wh / ratio);
} else {
$('.slide-img-container').width(ww);
$('.slide-img-container').height(ww * ratio);
}
}
$(document).keydown(function(event){
if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 33) { // 37 left, 38 up, 33 pageUp
preSlide();
} else if (event.keyCode == 39 || event.keyCode == 40 || event.keyCode == 32 || event.keyCode == 34){ // 39 right, 40 down, 32 space, 34 pageDown
nextSlide();
} else if (event.keyCode == 13) {
screenfull.toggle($('.slide-img-container')[0]);
}
});
function getCurSlide() {
return curSlide;
}
function preSlide() {
var preSlide = eval(Number(getCurSlide()) - 1);
gotoSlide(preSlide);
}
function nextSlide() {
var nextSlide = eval(Number(getCurSlide()) + 1);
gotoSlide(nextSlide);
}
function gotoSlide(slide) {
var slideSum = slideUrls.length;
if (slide <= 0) {
slide = 1;
} else if (slideSum < slide) {
slide = slideSum;
}
curSlide = slide;
/*
$(".slide-img-container img").fadeOut(function() {
$(this).attr("src", slideUrls[slide - 1]).fadeIn();
});
*/
$(".slide-img-container img").attr("src", slideUrls[slide - 1]);
var percent = Math.ceil((curSlide / slideUrls.length) * 100);
$('.thumbnail').removeClass('ppt-thumb-border');
$('.thumbnail[page="' + slide + '"]').addClass('ppt-thumb-border');
var thumbTop = slide * ($('.thumbnail[page="' + 1 + '"]').height() + 10 + $('.thumb-page-number-container').height()) - ($(document).height() / 2);
$('.span2 ').animate({scrollTop:(thumbTop)}, 'slow');
$('.select-page-selector').val(slide);
$('.select-page-selector-sync').val(slide);
$('.bottom-paging-progress .bar').width('' + percent + '%');
}
\ No newline at end of file
server/src/main/resources/web/officePicture.ftl
View file @ 4f5b0f74
<#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>
<meta charset="utf-8" />
<title>PDF图片预览</title>
<script src="js/lazyload.js"></script>
<#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>
<style>
body {
background-color: #404040;
}
.container {
width: 100%;
height: 100%;
}
.img-area {
text-align: center
}
#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">
<img class="my-photo" alt="loading" data-src="${img}" src="images/loading.gif">
<li><img id="${img}" url="${img}" src="${img}" width="1px" height="1px"></li>
</div>
</#list>
</ul>
</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>
window.onload = function () {
/*初始化水印*/
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();
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>
</#if>
</body>
</html>
\ No newline at end of file
</html>
</#if>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment