mirror of https://github.com/ghostfolio/ghostfolio
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
75 lines
1.8 KiB
75 lines
1.8 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
|
|
<style tyle="text/css">
|
|
html,body{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
#mainViewContainer {
|
|
width: 95%;
|
|
height: 95%;
|
|
border: 1px solid black;
|
|
margin: 10px;
|
|
padding: 3px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#mainView {
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 100%;
|
|
display: inline;
|
|
}
|
|
|
|
.thumbViewClass {
|
|
border: 1px solid black;
|
|
position: absolute;
|
|
bottom: 5px;
|
|
left: 5px;
|
|
width: 20%;
|
|
height: 30%;
|
|
margin: 3px;
|
|
padding: 3px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#thumbView {
|
|
z-index: 110;
|
|
background: white;
|
|
}
|
|
|
|
#scopeContainer {
|
|
z-index: 120;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="mainViewContainer">
|
|
<embed id="mainView" type="image/svg+xml" src="tiger.svg"/>
|
|
</div>
|
|
|
|
<div id="thumbViewContainer">
|
|
<svg id="scopeContainer" class="thumbViewClass">
|
|
<g>
|
|
<rect id="scope" fill="red" fill-opacity="0.1" stroke="red" stroke-width="2px" x="0" y="0" width="0" height="0"/>
|
|
<line id="line1" stroke="red" stroke-width="2px" x1="0" y1="0" x2="0" y2="0"/>
|
|
<line id="line2" stroke="red" stroke-width="2px" x1="0" y1="0" x2="0" y2="0"/>
|
|
</g>
|
|
</svg>
|
|
<embed id="thumbView" type="image/svg+xml" src="tiger.svg" class="thumbViewClass"/>
|
|
</div>
|
|
|
|
<script src="../dist/svg-pan-zoom.js" type="text/javascript" ></script>
|
|
<script src="./thumbnailViewer.js" type="text/javascript" ></script>
|
|
|
|
<script type="text/javascript">
|
|
thumbnailViewer({mainViewId: 'mainView',thumbViewId: 'thumbView'});
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|
|
|