Viewer and markers selectors v2 DEMO

Size
14,466 Kb
Views
6,072

How do I make an viewer and markers selectors v2 demo?

V2 : Press and hold draw a new marker. What is a viewer and markers selectors v2 demo? How do you make a viewer and markers selectors v2 demo? This script and codes were developed by Adrien Clerbois on 30 December 2022, Friday.

Viewer and markers selectors v2 DEMO Previews

Viewer and markers selectors v2 DEMO - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Viewer and markers selectors v2 DEMO</title> <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="action"> <a class="zoom-in">In</a> <a class="fit">Fit</a> <a class="zoom-out">Out</a> <div class="zoom-size">lll</div> <a class="active-marker">Active markering</a>
</div>
<div class="content"> <div class="wrapper"> <div class="spread single-page"> <div class="left page no-page"> <img class="thumb" src="http://footsalle-hainaut.be/img/test/page_1_thumb.jpg" /> <img class="full" src="http://footsalle-hainaut.be/img/test/page_1_large.jpg" /> </div> <div class="right page"> <img class="thumb" src="http://footsalle-hainaut.be/img/test/page_1_thumb.jpg" /> <img class="full" src="http://footsalle-hainaut.be/img/test/page_1_large.jpg" /> </div> <div class="markers"> </div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Viewer and markers selectors v2 DEMO - Script Codes CSS Codes

* { font-family: 'calibri';
}
.content { position: absolute; top: 0; left: 320px; right: 0; bottom: 0; padding: 0;
}
.content > .wrapper { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; position: absolute; top: 39px; border: 1px solid red; left: 0; right: 0; bottom: 0; overflow: auto;
}
.content > .wrapper div { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;
}
.content > .wrapper > .spread { position: absolute; cursor: hair;
}
.content > .wrapper > .spread > .page { position: absolute; width: 50%; height: 100%;
}
.content > .wrapper > .spread > .page.loaded > img { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;
}
.content > .wrapper > .spread > .page.loaded > img.full { display: block;
}
.content > .wrapper > .spread > .page.loaded > img.thumb { display: none;
}
.content > .wrapper > .spread > .page.right { right: 1px;
}
.content > .wrapper > .spread > .page > img { position: absolute; width: 100%; height: 100%; border: none; outline: none;
}
.content > .wrapper > .spread > .page > img.full { display: none;
}
.content > .wrapper > .spread > .page > img.thumb { display: block;
}
.content > .wrapper > .spread > .markers { height: auto !important; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
}
.content > .wrapper > .spread > .markers.can-add-marker { cursor: crosshair;
}
.content > .wrapper > .spread > .markers > .marker { -moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-transform: translateZ(0px); -moz-transform: translateZ(0px); -o-transform: translateZ(0px); -ms-transform: translateZ(0px); transform: translateZ(0px); position: absolute; background-repeat: no-repeat; background-position: 50% 50%; background-color: rgba(0, 255, 0, 0.2); border: 1px solid #248820; z-index: 1; cursor: default; box-sizing: border-box;
}
.content > .wrapper > .spread > .markers > .marker .ui-resizable-nw { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAK0lEQVQYV2PwcXf%2Fjw8DQQMDkPGBgKL%2FcEX4ALoiBmx4UCoCEg1A%2FAGfIgBei%2BGXciYpLAAAAABJRU5ErkJggg%3D%3D) no-repeat 0 0; left: -2px; top: -2px; z-index: 10; cursor: nw-resize; position: absolute; z-index: 9; height: 10px; width: 10px;
}
.content > .wrapper > .spread > .markers > .marker .ui-resizable-ne { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKklEQVQYV2P4%2F%2F9%2Fg4%2B7%2B398mAGoCEMQDX8AK8IFkBXhwkNXERB8AOIGABWR4Ze6oYTZAAAAAElFTkSuQmCC) no-repeat 100% 0; right: -2px; top: -2px; z-index: 10; cursor: ne-resize; position: absolute; z-index: 9; height: 10px; width: 10px;
}
.content > .wrapper > .spread > .markers > .marker .ui-resizable-se { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKElEQVQY02P4%2F%2F8%2FAw4MAw0M%2BBT5uLuD8WBVhBOgKIJxcGGQogZCigCpUuIPlfd2CgAAAABJRU5ErkJggg%3D%3D) no-repeat 100% 100%; right: -2px; bottom: -2px; z-index: 10; cursor: se-resize; position: absolute; z-index: 9; height: 10px; width: 10px;
}
.content > .wrapper > .spread > .markers > .marker .ui-resizable-sw { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAJUlEQVQYV2P4%2F%2F9%2Fw38EYMCGGXzc3f%2BD8FBXhBXAFeHCxCpqAAAA4%2BIPRCqpYAAAAABJRU5ErkJggg%3D%3D) no-repeat 0 100%; left: -2px; bottom: -2px; z-index: 10; cursor: sw-resize; position: absolute; z-index: 9; height: 10px; width: 10px;
}
.content > .wrapper > .spread > .markers > .marker .ui-resizable-n { top: -3px; cursor: n-resize;
}
.content > .wrapper > .spread > .markers > .marker .ui-resizable-n:hover { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAKCAYAAAB10jRKAAAKQWlDQ1BJQ0MgUHJvZmlsZQAASA2dlndUU9kWh8%2B9N73QEiIgJfQaegkg0jtIFQRRiUmAUAKGhCZ2RAVGFBEpVmRUwAFHhyJjRRQLg4Ji1wnyEFDGwVFEReXdjGsJ7601896a%2FcdZ39nnt9fZZ%2B9917oAUPyCBMJ0WAGANKFYFO7rwVwSE8vE9wIYEAEOWAHA4WZmBEf4RALU%2FL09mZmoSMaz9u4ugGS72yy%2FUCZz1v9%2FkSI3QyQGAApF1TY8fiYX5QKUU7PFGTL%2FBMr0lSkyhjEyFqEJoqwi48SvbPan5iu7yZiXJuShGlnOGbw0noy7UN6aJeGjjAShXJgl4GejfAdlvVRJmgDl9yjT0%2FicTAAwFJlfzOcmoWyJMkUUGe6J8gIACJTEObxyDov5OWieAHimZ%2BSKBIlJYqYR15hp5ejIZvrxs1P5YjErlMNN4Yh4TM%2F0tAyOMBeAr2%2BWRQElWW2ZaJHtrRzt7VnW5mj5v9nfHn5T%2FT3IevtV8Sbsz55BjJ5Z32zsrC%2B9FgD2JFqbHbO%2BlVUAtG0GQOXhrE%2FvIADyBQC03pzzHoZsXpLE4gwnC4vs7GxzAZ9rLivoN%2Fufgm%2FKv4Y595nL7vtWO6YXP4EjSRUzZUXlpqemS0TMzAwOl89k%2FfcQ%2F%2BPAOWnNycMsnJ%2FAF%2FGF6FVR6JQJhIlou4U8gViQLmQKhH%2FV4X8YNicHGX6daxRodV8AfYU5ULhJB8hvPQBDIwMkbj96An3rWxAxCsi%2BvGitka9zjzJ6%2Fuf6Hwtcim7hTEEiU%2Bb2DI9kciWiLBmj34RswQISkAd0oAo0gS4wAixgDRyAM3AD3iAAhIBIEAOWAy5IAmlABLJBPtgACkEx2AF2g2pwANSBetAEToI2cAZcBFfADXALDIBHQAqGwUswAd6BaQiC8BAVokGqkBakD5lC1hAbWgh5Q0FQOBQDxUOJkBCSQPnQJqgYKoOqoUNQPfQjdBq6CF2D%2BqAH0CA0Bv0BfYQRmALTYQ3YALaA2bA7HAhHwsvgRHgVnAcXwNvhSrgWPg63whfhG%2FAALIVfwpMIQMgIA9FGWAgb8URCkFgkAREha5EipAKpRZqQDqQbuY1IkXHkAwaHoWGYGBbGGeOHWYzhYlZh1mJKMNWYY5hWTBfmNmYQM4H5gqVi1bGmWCesP3YJNhGbjS3EVmCPYFuwl7ED2GHsOxwOx8AZ4hxwfrgYXDJuNa4Etw%2FXjLuA68MN4SbxeLwq3hTvgg%2FBc%2FBifCG%2BCn8cfx7fjx%2FGvyeQCVoEa4IPIZYgJGwkVBAaCOcI%2FYQRwjRRgahPdCKGEHnEXGIpsY7YQbxJHCZOkxRJhiQXUiQpmbSBVElqIl0mPSa9IZPJOmRHchhZQF5PriSfIF8lD5I%2FUJQoJhRPShxFQtlOOUq5QHlAeUOlUg2obtRYqpi6nVpPvUR9Sn0vR5Mzl%2FOX48mtk6uRa5Xrl3slT5TXl3eXXy6fJ18hf0r%2Bpvy4AlHBQMFTgaOwVqFG4bTCPYVJRZqilWKIYppiiWKD4jXFUSW8koGStxJPqUDpsNIlpSEaQtOledK4tE20Otpl2jAdRzek%2B9OT6cX0H%2Bi99AllJWVb5SjlHOUa5bPKUgbCMGD4M1IZpYyTjLuMj%2FM05rnP48%2FbNq9pXv%2B8KZX5Km4qfJUilWaVAZWPqkxVb9UU1Z2qbapP1DBqJmphatlq%2B9Uuq43Pp893ns%2BdXzT%2F5PyH6rC6iXq4%2Bmr1w%2Bo96pMamhq%2BGhkaVRqXNMY1GZpumsma5ZrnNMe0aFoLtQRa5VrntV4wlZnuzFRmJbOLOaGtru2nLdE%2BpN2rPa1jqLNYZ6NOs84TXZIuWzdBt1y3U3dCT0svWC9fr1HvoT5Rn62fpL9Hv1t%2FysDQINpgi0GbwaihiqG%2FYZ5ho%2BFjI6qRq9Eqo1qjO8Y4Y7ZxivE%2B41smsImdSZJJjclNU9jU3lRgus%2B0zwxr5mgmNKs1u8eisNxZWaxG1qA5wzzIfKN5m%2FkrCz2LWIudFt0WXyztLFMt6ywfWSlZBVhttOqw%2BsPaxJprXWN9x4Zq42Ozzqbd5rWtqS3fdr%2FtfTuaXbDdFrtOu8%2F2DvYi%2Byb7MQc9h3iHvQ732HR2KLuEfdUR6%2BjhuM7xjOMHJ3snsdNJp9%2BdWc4pzg3OowsMF%2FAX1C0YctFx4bgccpEuZC6MX3hwodRV25XjWuv6zE3Xjed2xG3E3dg92f24%2BysPSw%2BRR4vHlKeT5xrPC16Il69XkVevt5L3Yu9q76c%2BOj6JPo0%2BE752vqt9L%2Fhh%2FQL9dvrd89fw5%2FrX%2B08EOASsCegKpARGBFYHPgsyCRIFdQTDwQHBu4IfL9JfJFzUFgJC%2FEN2hTwJNQxdFfpzGC4sNKwm7Hm4VXh%2BeHcELWJFREPEu0iPyNLIR4uNFksWd0bJR8VF1UdNRXtFl0VLl1gsWbPkRoxajCCmPRYfGxV7JHZyqffS3UuH4%2BziCuPuLjNclrPs2nK15anLz66QX8FZcSoeGx8d3xD%2FiRPCqeVMrvRfuXflBNeTu4f7kufGK%2BeN8V34ZfyRBJeEsoTRRJfEXYljSa5JFUnjAk9BteB1sl%2FygeSplJCUoykzqdGpzWmEtPi000IlYYqwK10zPSe9L8M0ozBDuspp1e5VE6JA0ZFMKHNZZruYjv5M9UiMJJslg1kLs2qy3mdHZZ%2FKUcwR5vTkmuRuyx3J88n7fjVmNXd1Z752%2Fob8wTXuaw6thdauXNu5Tnddwbrh9b7rj20gbUjZ8MtGy41lG99uit7UUaBRsL5gaLPv5sZCuUJR4b0tzlsObMVsFWzt3WazrWrblyJe0fViy%2BKK4k8l3JLr31l9V%2FndzPaE7b2l9qX7d%2BB2CHfc3em681iZYlle2dCu4F2t5czyovK3u1fsvlZhW3FgD2mPZI%2B0MqiyvUqvakfVp%2Bqk6oEaj5rmvep7t%2B2d2sfb17%2FfbX%2FTAY0DxQc%2BHhQcvH%2FI91BrrUFtxWHc4azDz%2Bui6rq%2FZ39ff0TtSPGRz0eFR6XHwo911TvU1zeoN5Q2wo2SxrHjccdv%2FeD1Q3sTq%2BlQM6O5%2BAQ4ITnx4sf4H%2B%2BeDDzZeYp9qukn%2FZ%2F2ttBailqh1tzWibakNml7THvf6YDTnR3OHS0%2Fm%2F989Iz2mZqzymdLz5HOFZybOZ93fvJCxoXxi4kXhzpXdD66tOTSna6wrt7LgZevXvG5cqnbvfv8VZerZ645XTt9nX297Yb9jdYeu56WX%2Bx%2Baem172296XCz%2FZbjrY6%2BBX3n%2Bl37L972un3ljv%2BdGwOLBvruLr57%2F17cPel93v3RB6kPXj%2FMejj9aP1j7OOiJwpPKp6qP6391fjXZqm99Oyg12DPs4hnj4a4Qy%2F%2FlfmvT8MFz6nPK0a0RupHrUfPjPmM3Xqx9MXwy4yX0%2BOFvyn%2BtveV0auffnf7vWdiycTwa9HrmT9K3qi%2BOfrW9m3nZOjk03dp76anit6rvj%2F2gf2h%2B2P0x5Hp7E%2F4T5WfjT93fAn88ngmbWbm3%2FeE8%2FsyOll%2BAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEIWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS40LjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgICAgICAgICAgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIKICAgICAgICAgICAgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIj4KICAgICAgICAgPHRpZmY6UmVzb2x1dGlvblVuaXQ%2BMTwvdGlmZjpSZXNvbHV0aW9uVW5pdD4KICAgICAgICAgPHRpZmY6Q29tcHJlc3Npb24%2BNTwvdGlmZjpDb21wcmVzc2lvbj4KICAgICAgICAgPHRpZmY6WFJlc29sdXRpb24%2BNzI8L3RpZmY6WFJlc29sdXRpb24%2BCiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24%2BCiAgICAgICAgIDx0aWZmOllSZXNvbHV0aW9uPjcyPC90aWZmOllSZXNvbHV0aW9uPgogICAgICAgICA8ZXhpZjpQaXhlbFhEaW1lbnNpb24%2BMTwvZXhpZjpQaXhlbFhEaW1lbnNpb24%2BCiAgICAgICAgIDxleGlmOkNvbG9yU3BhY2U%2BMTwvZXhpZjpDb2xvclNwYWNlPgogICAgICAgICA8ZXhpZjpQaXhlbFlEaW1lbnNpb24%2BMTA8L2V4aWY6UGl4ZWxZRGltZW5zaW9uPgogICAgICAgICA8ZGM6c3ViamVjdD4KICAgICAgICAgICAgPHJkZjpCYWcvPgogICAgICAgICA8L2RjOnN1YmplY3Q%2BCiAgICAgICAgIDx4bXA6TW9kaWZ5RGF0ZT4yMDEzLTA5LTAyVDE3OjA5OjE3PC94bXA6TW9kaWZ5RGF0ZT4KICAgICAgICAgPHhtcDpDcmVhdG9yVG9vbD5QaXhlbG1hdG9yIDIuMjwveG1wOkNyZWF0b3JUb29sPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4Km0%2BxfQAAABRJREFUCB1jYEAF%2Bvr6%2F5lQhdB4ADF8AY8%2FVNKQAAAAAElFTkSuQmCC) repeat 0 50%;
}
.content > .wrapper > .spread > .markers > .marker .ui-resizable-e { right: -2px; cursor: e-resize;
}
.content > .wrapper > .spread > .markers > .marker .ui-resizable-e:hover { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAYAAADn9T9%2BAAAKQWlDQ1BJQ0MgUHJvZmlsZQAASA2dlndUU9kWh8%2B9N73QEiIgJfQaegkg0jtIFQRRiUmAUAKGhCZ2RAVGFBEpVmRUwAFHhyJjRRQLg4Ji1wnyEFDGwVFEReXdjGsJ7601896a%2FcdZ39nnt9fZZ%2B9917oAUPyCBMJ0WAGANKFYFO7rwVwSE8vE9wIYEAEOWAHA4WZmBEf4RALU%2FL09mZmoSMaz9u4ugGS72yy%2FUCZz1v9%2FkSI3QyQGAApF1TY8fiYX5QKUU7PFGTL%2FBMr0lSkyhjEyFqEJoqwi48SvbPan5iu7yZiXJuShGlnOGbw0noy7UN6aJeGjjAShXJgl4GejfAdlvVRJmgDl9yjT0%2FicTAAwFJlfzOcmoWyJMkUUGe6J8gIACJTEObxyDov5OWieAHimZ%2BSKBIlJYqYR15hp5ejIZvrxs1P5YjErlMNN4Yh4TM%2F0tAyOMBeAr2%2BWRQElWW2ZaJHtrRzt7VnW5mj5v9nfHn5T%2FT3IevtV8Sbsz55BjJ5Z32zsrC%2B9FgD2JFqbHbO%2BlVUAtG0GQOXhrE%2FvIADyBQC03pzzHoZsXpLE4gwnC4vs7GxzAZ9rLivoN%2Fufgm%2FKv4Y595nL7vtWO6YXP4EjSRUzZUXlpqemS0TMzAwOl89k%2FfcQ%2F%2BPAOWnNycMsnJ%2FAF%2FGF6FVR6JQJhIlou4U8gViQLmQKhH%2FV4X8YNicHGX6daxRodV8AfYU5ULhJB8hvPQBDIwMkbj96An3rWxAxCsi%2BvGitka9zjzJ6%2Fuf6Hwtcim7hTEEiU%2Bb2DI9kciWiLBmj34RswQISkAd0oAo0gS4wAixgDRyAM3AD3iAAhIBIEAOWAy5IAmlABLJBPtgACkEx2AF2g2pwANSBetAEToI2cAZcBFfADXALDIBHQAqGwUswAd6BaQiC8BAVokGqkBakD5lC1hAbWgh5Q0FQOBQDxUOJkBCSQPnQJqgYKoOqoUNQPfQjdBq6CF2D%2BqAH0CA0Bv0BfYQRmALTYQ3YALaA2bA7HAhHwsvgRHgVnAcXwNvhSrgWPg63whfhG%2FAALIVfwpMIQMgIA9FGWAgb8URCkFgkAREha5EipAKpRZqQDqQbuY1IkXHkAwaHoWGYGBbGGeOHWYzhYlZh1mJKMNWYY5hWTBfmNmYQM4H5gqVi1bGmWCesP3YJNhGbjS3EVmCPYFuwl7ED2GHsOxwOx8AZ4hxwfrgYXDJuNa4Etw%2FXjLuA68MN4SbxeLwq3hTvgg%2FBc%2FBifCG%2BCn8cfx7fjx%2FGvyeQCVoEa4IPIZYgJGwkVBAaCOcI%2FYQRwjRRgahPdCKGEHnEXGIpsY7YQbxJHCZOkxRJhiQXUiQpmbSBVElqIl0mPSa9IZPJOmRHchhZQF5PriSfIF8lD5I%2FUJQoJhRPShxFQtlOOUq5QHlAeUOlUg2obtRYqpi6nVpPvUR9Sn0vR5Mzl%2FOX48mtk6uRa5Xrl3slT5TXl3eXXy6fJ18hf0r%2Bpvy4AlHBQMFTgaOwVqFG4bTCPYVJRZqilWKIYppiiWKD4jXFUSW8koGStxJPqUDpsNIlpSEaQtOledK4tE20Otpl2jAdRzek%2B9OT6cX0H%2Bi99AllJWVb5SjlHOUa5bPKUgbCMGD4M1IZpYyTjLuMj%2FM05rnP48%2FbNq9pXv%2B8KZX5Km4qfJUilWaVAZWPqkxVb9UU1Z2qbapP1DBqJmphatlq%2B9Uuq43Pp893ns%2BdXzT%2F5PyH6rC6iXq4%2Bmr1w%2Bo96pMamhq%2BGhkaVRqXNMY1GZpumsma5ZrnNMe0aFoLtQRa5VrntV4wlZnuzFRmJbOLOaGtru2nLdE%2BpN2rPa1jqLNYZ6NOs84TXZIuWzdBt1y3U3dCT0svWC9fr1HvoT5Rn62fpL9Hv1t%2FysDQINpgi0GbwaihiqG%2FYZ5ho%2BFjI6qRq9Eqo1qjO8Y4Y7ZxivE%2B41smsImdSZJJjclNU9jU3lRgus%2B0zwxr5mgmNKs1u8eisNxZWaxG1qA5wzzIfKN5m%2FkrCz2LWIudFt0WXyztLFMt6ywfWSlZBVhttOqw%2BsPaxJprXWN9x4Zq42Ozzqbd5rWtqS3fdr%2FtfTuaXbDdFrtOu8%2F2DvYi%2Byb7MQc9h3iHvQ732HR2KLuEfdUR6%2BjhuM7xjOMHJ3snsdNJp9%2BdWc4pzg3OowsMF%2FAX1C0YctFx4bgccpEuZC6MX3hwodRV25XjWuv6zE3Xjed2xG3E3dg92f24%2BysPSw%2BRR4vHlKeT5xrPC16Il69XkVevt5L3Yu9q76c%2BOj6JPo0%2BE752vqt9L%2Fhh%2FQL9dvrd89fw5%2FrX%2B08EOASsCegKpARGBFYHPgsyCRIFdQTDwQHBu4IfL9JfJFzUFgJC%2FEN2hTwJNQxdFfpzGC4sNKwm7Hm4VXh%2BeHcELWJFREPEu0iPyNLIR4uNFksWd0bJR8VF1UdNRXtFl0VLl1gsWbPkRoxajCCmPRYfGxV7JHZyqffS3UuH4%2BziCuPuLjNclrPs2nK15anLz66QX8FZcSoeGx8d3xD%2FiRPCqeVMrvRfuXflBNeTu4f7kufGK%2BeN8V34ZfyRBJeEsoTRRJfEXYljSa5JFUnjAk9BteB1sl%2FygeSplJCUoykzqdGpzWmEtPi000IlYYqwK10zPSe9L8M0ozBDuspp1e5VE6JA0ZFMKHNZZruYjv5M9UiMJJslg1kLs2qy3mdHZZ%2FKUcwR5vTkmuRuyx3J88n7fjVmNXd1Z752%2Fob8wTXuaw6thdauXNu5Tnddwbrh9b7rj20gbUjZ8MtGy41lG99uit7UUaBRsL5gaLPv5sZCuUJR4b0tzlsObMVsFWzt3WazrWrblyJe0fViy%2BKK4k8l3JLr31l9V%2FndzPaE7b2l9qX7d%2BB2CHfc3em681iZYlle2dCu4F2t5czyovK3u1fsvlZhW3FgD2mPZI%2B0MqiyvUqvakfVp%2Bqk6oEaj5rmvep7t%2B2d2sfb17%2FfbX%2FTAY0DxQc%2BHhQcvH%2FI91BrrUFtxWHc4azDz%2Bui6rq%2FZ39ff0TtSPGRz0eFR6XHwo911TvU1zeoN5Q2wo2SxrHjccdv%2FeD1Q3sTq%2BlQM6O5%2BAQ4ITnx4sf4H%2B%2BeDDzZeYp9qukn%2FZ%2F2ttBailqh1tzWibakNml7THvf6YDTnR3OHS0%2Fm%2F989Iz2mZqzymdLz5HOFZybOZ93fvJCxoXxi4kXhzpXdD66tOTSna6wrt7LgZevXvG5cqnbvfv8VZerZ645XTt9nX297Yb9jdYeu56WX%2Bx%2Baem172296XCz%2FZbjrY6%2BBX3n%2Bl37L972un3ljv%2BdGwOLBvruLr57%2F17cPel93v3RB6kPXj%2FMejj9aP1j7OOiJwpPKp6qP6391fjXZqm99Oyg12DPs4hnj4a4Qy%2F%2FlfmvT8MFz6nPK0a0RupHrUfPjPmM3Xqx9MXwy4yX0%2BOFvyn%2BtveV0auffnf7vWdiycTwa9HrmT9K3qi%2BOfrW9m3nZOjk03dp76anit6rvj%2F2gf2h%2B2P0x5Hp7E%2F4T5WfjT93fAn88ngmbWbm3%2FeE8%2FsyOll%2BAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEIWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS40LjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgICAgICAgICAgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIKICAgICAgICAgICAgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIj4KICAgICAgICAgPHRpZmY6UmVzb2x1dGlvblVuaXQ%2BMTwvdGlmZjpSZXNvbHV0aW9uVW5pdD4KICAgICAgICAgPHRpZmY6Q29tcHJlc3Npb24%2BNTwvdGlmZjpDb21wcmVzc2lvbj4KICAgICAgICAgPHRpZmY6WFJlc29sdXRpb24%2BNzI8L3RpZmY6WFJlc29sdXRpb24%2BCiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24%2BCiAgICAgICAgIDx0aWZmOllSZXNvbHV0aW9uPjcyPC90aWZmOllSZXNvbHV0aW9uPgogICAgICAgICA8ZXhpZjpQaXhlbFhEaW1lbnNpb24%2BMTA8L2V4aWY6UGl4ZWxYRGltZW5zaW9uPgogICAgICAgICA8ZXhpZjpDb2xvclNwYWNlPjE8L2V4aWY6Q29sb3JTcGFjZT4KICAgICAgICAgPGV4aWY6UGl4ZWxZRGltZW5zaW9uPjE8L2V4aWY6UGl4ZWxZRGltZW5zaW9uPgogICAgICAgICA8ZGM6c3ViamVjdD4KICAgICAgICAgICAgPHJkZjpCYWcvPgogICAgICAgICA8L2RjOnN1YmplY3Q%2BCiAgICAgICAgIDx4bXA6TW9kaWZ5RGF0ZT4yMDEzLTA5LTAyVDE3OjA5OjQxPC94bXA6TW9kaWZ5RGF0ZT4KICAgICAgICAgPHhtcDpDcmVhdG9yVG9vbD5QaXhlbG1hdG9yIDIuMjwveG1wOkNyZWF0b3JUb29sPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KB2PQswAAABNJREFUCB1jYMAC9PX1%2F4MwshQAMMUDGeBJ2pUAAAAASUVORK5CYII%3D) repeat 0 50%;
}
.content > .wrapper > .spread > .markers > .marker .ui-resizable-s { bottom: -4px; cursor: s-resize;
}
.content > .wrapper > .spread > .markers > .marker .ui-resizable-s:hover { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAKCAYAAAB10jRKAAAKQWlDQ1BJQ0MgUHJvZmlsZQAASA2dlndUU9kWh8%2B9N73QEiIgJfQaegkg0jtIFQRRiUmAUAKGhCZ2RAVGFBEpVmRUwAFHhyJjRRQLg4Ji1wnyEFDGwVFEReXdjGsJ7601896a%2FcdZ39nnt9fZZ%2B9917oAUPyCBMJ0WAGANKFYFO7rwVwSE8vE9wIYEAEOWAHA4WZmBEf4RALU%2FL09mZmoSMaz9u4ugGS72yy%2FUCZz1v9%2FkSI3QyQGAApF1TY8fiYX5QKUU7PFGTL%2FBMr0lSkyhjEyFqEJoqwi48SvbPan5iu7yZiXJuShGlnOGbw0noy7UN6aJeGjjAShXJgl4GejfAdlvVRJmgDl9yjT0%2FicTAAwFJlfzOcmoWyJMkUUGe6J8gIACJTEObxyDov5OWieAHimZ%2BSKBIlJYqYR15hp5ejIZvrxs1P5YjErlMNN4Yh4TM%2F0tAyOMBeAr2%2BWRQElWW2ZaJHtrRzt7VnW5mj5v9nfHn5T%2FT3IevtV8Sbsz55BjJ5Z32zsrC%2B9FgD2JFqbHbO%2BlVUAtG0GQOXhrE%2FvIADyBQC03pzzHoZsXpLE4gwnC4vs7GxzAZ9rLivoN%2Fufgm%2FKv4Y595nL7vtWO6YXP4EjSRUzZUXlpqemS0TMzAwOl89k%2FfcQ%2F%2BPAOWnNycMsnJ%2FAF%2FGF6FVR6JQJhIlou4U8gViQLmQKhH%2FV4X8YNicHGX6daxRodV8AfYU5ULhJB8hvPQBDIwMkbj96An3rWxAxCsi%2BvGitka9zjzJ6%2Fuf6Hwtcim7hTEEiU%2Bb2DI9kciWiLBmj34RswQISkAd0oAo0gS4wAixgDRyAM3AD3iAAhIBIEAOWAy5IAmlABLJBPtgACkEx2AF2g2pwANSBetAEToI2cAZcBFfADXALDIBHQAqGwUswAd6BaQiC8BAVokGqkBakD5lC1hAbWgh5Q0FQOBQDxUOJkBCSQPnQJqgYKoOqoUNQPfQjdBq6CF2D%2BqAH0CA0Bv0BfYQRmALTYQ3YALaA2bA7HAhHwsvgRHgVnAcXwNvhSrgWPg63whfhG%2FAALIVfwpMIQMgIA9FGWAgb8URCkFgkAREha5EipAKpRZqQDqQbuY1IkXHkAwaHoWGYGBbGGeOHWYzhYlZh1mJKMNWYY5hWTBfmNmYQM4H5gqVi1bGmWCesP3YJNhGbjS3EVmCPYFuwl7ED2GHsOxwOx8AZ4hxwfrgYXDJuNa4Etw%2FXjLuA68MN4SbxeLwq3hTvgg%2FBc%2FBifCG%2BCn8cfx7fjx%2FGvyeQCVoEa4IPIZYgJGwkVBAaCOcI%2FYQRwjRRgahPdCKGEHnEXGIpsY7YQbxJHCZOkxRJhiQXUiQpmbSBVElqIl0mPSa9IZPJOmRHchhZQF5PriSfIF8lD5I%2FUJQoJhRPShxFQtlOOUq5QHlAeUOlUg2obtRYqpi6nVpPvUR9Sn0vR5Mzl%2FOX48mtk6uRa5Xrl3slT5TXl3eXXy6fJ18hf0r%2Bpvy4AlHBQMFTgaOwVqFG4bTCPYVJRZqilWKIYppiiWKD4jXFUSW8koGStxJPqUDpsNIlpSEaQtOledK4tE20Otpl2jAdRzek%2B9OT6cX0H%2Bi99AllJWVb5SjlHOUa5bPKUgbCMGD4M1IZpYyTjLuMj%2FM05rnP48%2FbNq9pXv%2B8KZX5Km4qfJUilWaVAZWPqkxVb9UU1Z2qbapP1DBqJmphatlq%2B9Uuq43Pp893ns%2BdXzT%2F5PyH6rC6iXq4%2Bmr1w%2Bo96pMamhq%2BGhkaVRqXNMY1GZpumsma5ZrnNMe0aFoLtQRa5VrntV4wlZnuzFRmJbOLOaGtru2nLdE%2BpN2rPa1jqLNYZ6NOs84TXZIuWzdBt1y3U3dCT0svWC9fr1HvoT5Rn62fpL9Hv1t%2FysDQINpgi0GbwaihiqG%2FYZ5ho%2BFjI6qRq9Eqo1qjO8Y4Y7ZxivE%2B41smsImdSZJJjclNU9jU3lRgus%2B0zwxr5mgmNKs1u8eisNxZWaxG1qA5wzzIfKN5m%2FkrCz2LWIudFt0WXyztLFMt6ywfWSlZBVhttOqw%2BsPaxJprXWN9x4Zq42Ozzqbd5rWtqS3fdr%2FtfTuaXbDdFrtOu8%2F2DvYi%2Byb7MQc9h3iHvQ732HR2KLuEfdUR6%2BjhuM7xjOMHJ3snsdNJp9%2BdWc4pzg3OowsMF%2FAX1C0YctFx4bgccpEuZC6MX3hwodRV25XjWuv6zE3Xjed2xG3E3dg92f24%2BysPSw%2BRR4vHlKeT5xrPC16Il69XkVevt5L3Yu9q76c%2BOj6JPo0%2BE752vqt9L%2Fhh%2FQL9dvrd89fw5%2FrX%2B08EOASsCegKpARGBFYHPgsyCRIFdQTDwQHBu4IfL9JfJFzUFgJC%2FEN2hTwJNQxdFfpzGC4sNKwm7Hm4VXh%2BeHcELWJFREPEu0iPyNLIR4uNFksWd0bJR8VF1UdNRXtFl0VLl1gsWbPkRoxajCCmPRYfGxV7JHZyqffS3UuH4%2BziCuPuLjNclrPs2nK15anLz66QX8FZcSoeGx8d3xD%2FiRPCqeVMrvRfuXflBNeTu4f7kufGK%2BeN8V34ZfyRBJeEsoTRRJfEXYljSa5JFUnjAk9BteB1sl%2FygeSplJCUoykzqdGpzWmEtPi000IlYYqwK10zPSe9L8M0ozBDuspp1e5VE6JA0ZFMKHNZZruYjv5M9UiMJJslg1kLs2qy3mdHZZ%2FKUcwR5vTkmuRuyx3J88n7fjVmNXd1Z752%2Fob8wTXuaw6thdauXNu5Tnddwbrh9b7rj20gbUjZ8MtGy41lG99uit7UUaBRsL5gaLPv5sZCuUJR4b0tzlsObMVsFWzt3WazrWrblyJe0fViy%2BKK4k8l3JLr31l9V%2FndzPaE7b2l9qX7d%2BB2CHfc3em681iZYlle2dCu4F2t5czyovK3u1fsvlZhW3FgD2mPZI%2B0MqiyvUqvakfVp%2Bqk6oEaj5rmvep7t%2B2d2sfb17%2FfbX%2FTAY0DxQc%2BHhQcvH%2FI91BrrUFtxWHc4azDz%2Bui6rq%2FZ39ff0TtSPGRz0eFR6XHwo911TvU1zeoN5Q2wo2SxrHjccdv%2FeD1Q3sTq%2BlQM6O5%2BAQ4ITnx4sf4H%2B%2BeDDzZeYp9qukn%2FZ%2F2ttBailqh1tzWibakNml7THvf6YDTnR3OHS0%2Fm%2F989Iz2mZqzymdLz5HOFZybOZ93fvJCxoXxi4kXhzpXdD66tOTSna6wrt7LgZevXvG5cqnbvfv8VZerZ645XTt9nX297Yb9jdYeu56WX%2Bx%2Baem172296XCz%2FZbjrY6%2BBX3n%2Bl37L972un3ljv%2BdGwOLBvruLr57%2F17cPel93v3RB6kPXj%2FMejj9aP1j7OOiJwpPKp6qP6391fjXZqm99Oyg12DPs4hnj4a4Qy%2F%2FlfmvT8MFz6nPK0a0RupHrUfPjPmM3Xqx9MXwy4yX0%2BOFvyn%2BtveV0auffnf7vWdiycTwa9HrmT9K3qi%2BOfrW9m3nZOjk03dp76anit6rvj%2F2gf2h%2B2P0x5Hp7E%2F4T5WfjT93fAn88ngmbWbm3%2FeE8%2FsyOll%2BAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEIWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS40LjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgICAgICAgICAgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIKICAgICAgICAgICAgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIj4KICAgICAgICAgPHRpZmY6UmVzb2x1dGlvblVuaXQ%2BMTwvdGlmZjpSZXNvbHV0aW9uVW5pdD4KICAgICAgICAgPHRpZmY6Q29tcHJlc3Npb24%2BNTwvdGlmZjpDb21wcmVzc2lvbj4KICAgICAgICAgPHRpZmY6WFJlc29sdXRpb24%2BNzI8L3RpZmY6WFJlc29sdXRpb24%2BCiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24%2BCiAgICAgICAgIDx0aWZmOllSZXNvbHV0aW9uPjcyPC90aWZmOllSZXNvbHV0aW9uPgogICAgICAgICA8ZXhpZjpQaXhlbFhEaW1lbnNpb24%2BMTwvZXhpZjpQaXhlbFhEaW1lbnNpb24%2BCiAgICAgICAgIDxleGlmOkNvbG9yU3BhY2U%2BMTwvZXhpZjpDb2xvclNwYWNlPgogICAgICAgICA8ZXhpZjpQaXhlbFlEaW1lbnNpb24%2BMTA8L2V4aWY6UGl4ZWxZRGltZW5zaW9uPgogICAgICAgICA8ZGM6c3ViamVjdD4KICAgICAgICAgICAgPHJkZjpCYWcvPgogICAgICAgICA8L2RjOnN1YmplY3Q%2BCiAgICAgICAgIDx4bXA6TW9kaWZ5RGF0ZT4yMDEzLTA5LTAyVDE3OjA5OjMxPC94bXA6TW9kaWZ5RGF0ZT4KICAgICAgICAgPHhtcDpDcmVhdG9yVG9vbD5QaXhlbG1hdG9yIDIuMjwveG1wOkNyZWF0b3JUb29sPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4Kyw8TqwAAABNJREFUCB1jYMAF9PX1%2FzNhkQQAIfABj0iwIXgAAAAASUVORK5CYII%3D) repeat 0 50%;
}
.content > .wrapper > .spread > .markers > .marker .ui-resizable-w { left: -5px; cursor: w-resize;
}
.content > .wrapper > .spread > .markers > .marker .ui-resizable-w:hover { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAYAAADn9T9%2BAAAKQWlDQ1BJQ0MgUHJvZmlsZQAASA2dlndUU9kWh8%2B9N73QEiIgJfQaegkg0jtIFQRRiUmAUAKGhCZ2RAVGFBEpVmRUwAFHhyJjRRQLg4Ji1wnyEFDGwVFEReXdjGsJ7601896a%2FcdZ39nnt9fZZ%2B9917oAUPyCBMJ0WAGANKFYFO7rwVwSE8vE9wIYEAEOWAHA4WZmBEf4RALU%2FL09mZmoSMaz9u4ugGS72yy%2FUCZz1v9%2FkSI3QyQGAApF1TY8fiYX5QKUU7PFGTL%2FBMr0lSkyhjEyFqEJoqwi48SvbPan5iu7yZiXJuShGlnOGbw0noy7UN6aJeGjjAShXJgl4GejfAdlvVRJmgDl9yjT0%2FicTAAwFJlfzOcmoWyJMkUUGe6J8gIACJTEObxyDov5OWieAHimZ%2BSKBIlJYqYR15hp5ejIZvrxs1P5YjErlMNN4Yh4TM%2F0tAyOMBeAr2%2BWRQElWW2ZaJHtrRzt7VnW5mj5v9nfHn5T%2FT3IevtV8Sbsz55BjJ5Z32zsrC%2B9FgD2JFqbHbO%2BlVUAtG0GQOXhrE%2FvIADyBQC03pzzHoZsXpLE4gwnC4vs7GxzAZ9rLivoN%2Fufgm%2FKv4Y595nL7vtWO6YXP4EjSRUzZUXlpqemS0TMzAwOl89k%2FfcQ%2F%2BPAOWnNycMsnJ%2FAF%2FGF6FVR6JQJhIlou4U8gViQLmQKhH%2FV4X8YNicHGX6daxRodV8AfYU5ULhJB8hvPQBDIwMkbj96An3rWxAxCsi%2BvGitka9zjzJ6%2Fuf6Hwtcim7hTEEiU%2Bb2DI9kciWiLBmj34RswQISkAd0oAo0gS4wAixgDRyAM3AD3iAAhIBIEAOWAy5IAmlABLJBPtgACkEx2AF2g2pwANSBetAEToI2cAZcBFfADXALDIBHQAqGwUswAd6BaQiC8BAVokGqkBakD5lC1hAbWgh5Q0FQOBQDxUOJkBCSQPnQJqgYKoOqoUNQPfQjdBq6CF2D%2BqAH0CA0Bv0BfYQRmALTYQ3YALaA2bA7HAhHwsvgRHgVnAcXwNvhSrgWPg63whfhG%2FAALIVfwpMIQMgIA9FGWAgb8URCkFgkAREha5EipAKpRZqQDqQbuY1IkXHkAwaHoWGYGBbGGeOHWYzhYlZh1mJKMNWYY5hWTBfmNmYQM4H5gqVi1bGmWCesP3YJNhGbjS3EVmCPYFuwl7ED2GHsOxwOx8AZ4hxwfrgYXDJuNa4Etw%2FXjLuA68MN4SbxeLwq3hTvgg%2FBc%2FBifCG%2BCn8cfx7fjx%2FGvyeQCVoEa4IPIZYgJGwkVBAaCOcI%2FYQRwjRRgahPdCKGEHnEXGIpsY7YQbxJHCZOkxRJhiQXUiQpmbSBVElqIl0mPSa9IZPJOmRHchhZQF5PriSfIF8lD5I%2FUJQoJhRPShxFQtlOOUq5QHlAeUOlUg2obtRYqpi6nVpPvUR9Sn0vR5Mzl%2FOX48mtk6uRa5Xrl3slT5TXl3eXXy6fJ18hf0r%2Bpvy4AlHBQMFTgaOwVqFG4bTCPYVJRZqilWKIYppiiWKD4jXFUSW8koGStxJPqUDpsNIlpSEaQtOledK4tE20Otpl2jAdRzek%2B9OT6cX0H%2Bi99AllJWVb5SjlHOUa5bPKUgbCMGD4M1IZpYyTjLuMj%2FM05rnP48%2FbNq9pXv%2B8KZX5Km4qfJUilWaVAZWPqkxVb9UU1Z2qbapP1DBqJmphatlq%2B9Uuq43Pp893ns%2BdXzT%2F5PyH6rC6iXq4%2Bmr1w%2Bo96pMamhq%2BGhkaVRqXNMY1GZpumsma5ZrnNMe0aFoLtQRa5VrntV4wlZnuzFRmJbOLOaGtru2nLdE%2BpN2rPa1jqLNYZ6NOs84TXZIuWzdBt1y3U3dCT0svWC9fr1HvoT5Rn62fpL9Hv1t%2FysDQINpgi0GbwaihiqG%2FYZ5ho%2BFjI6qRq9Eqo1qjO8Y4Y7ZxivE%2B41smsImdSZJJjclNU9jU3lRgus%2B0zwxr5mgmNKs1u8eisNxZWaxG1qA5wzzIfKN5m%2FkrCz2LWIudFt0WXyztLFMt6ywfWSlZBVhttOqw%2BsPaxJprXWN9x4Zq42Ozzqbd5rWtqS3fdr%2FtfTuaXbDdFrtOu8%2F2DvYi%2Byb7MQc9h3iHvQ732HR2KLuEfdUR6%2BjhuM7xjOMHJ3snsdNJp9%2BdWc4pzg3OowsMF%2FAX1C0YctFx4bgccpEuZC6MX3hwodRV25XjWuv6zE3Xjed2xG3E3dg92f24%2BysPSw%2BRR4vHlKeT5xrPC16Il69XkVevt5L3Yu9q76c%2BOj6JPo0%2BE752vqt9L%2Fhh%2FQL9dvrd89fw5%2FrX%2B08EOASsCegKpARGBFYHPgsyCRIFdQTDwQHBu4IfL9JfJFzUFgJC%2FEN2hTwJNQxdFfpzGC4sNKwm7Hm4VXh%2BeHcELWJFREPEu0iPyNLIR4uNFksWd0bJR8VF1UdNRXtFl0VLl1gsWbPkRoxajCCmPRYfGxV7JHZyqffS3UuH4%2BziCuPuLjNclrPs2nK15anLz66QX8FZcSoeGx8d3xD%2FiRPCqeVMrvRfuXflBNeTu4f7kufGK%2BeN8V34ZfyRBJeEsoTRRJfEXYljSa5JFUnjAk9BteB1sl%2FygeSplJCUoykzqdGpzWmEtPi000IlYYqwK10zPSe9L8M0ozBDuspp1e5VE6JA0ZFMKHNZZruYjv5M9UiMJJslg1kLs2qy3mdHZZ%2FKUcwR5vTkmuRuyx3J88n7fjVmNXd1Z752%2Fob8wTXuaw6thdauXNu5Tnddwbrh9b7rj20gbUjZ8MtGy41lG99uit7UUaBRsL5gaLPv5sZCuUJR4b0tzlsObMVsFWzt3WazrWrblyJe0fViy%2BKK4k8l3JLr31l9V%2FndzPaE7b2l9qX7d%2BB2CHfc3em681iZYlle2dCu4F2t5czyovK3u1fsvlZhW3FgD2mPZI%2B0MqiyvUqvakfVp%2Bqk6oEaj5rmvep7t%2B2d2sfb17%2FfbX%2FTAY0DxQc%2BHhQcvH%2FI91BrrUFtxWHc4azDz%2Bui6rq%2FZ39ff0TtSPGRz0eFR6XHwo911TvU1zeoN5Q2wo2SxrHjccdv%2FeD1Q3sTq%2BlQM6O5%2BAQ4ITnx4sf4H%2B%2BeDDzZeYp9qukn%2FZ%2F2ttBailqh1tzWibakNml7THvf6YDTnR3OHS0%2Fm%2F989Iz2mZqzymdLz5HOFZybOZ93fvJCxoXxi4kXhzpXdD66tOTSna6wrt7LgZevXvG5cqnbvfv8VZerZ645XTt9nX297Yb9jdYeu56WX%2Bx%2Baem172296XCz%2FZbjrY6%2BBX3n%2Bl37L972un3ljv%2BdGwOLBvruLr57%2F17cPel93v3RB6kPXj%2FMejj9aP1j7OOiJwpPKp6qP6391fjXZqm99Oyg12DPs4hnj4a4Qy%2F%2FlfmvT8MFz6nPK0a0RupHrUfPjPmM3Xqx9MXwy4yX0%2BOFvyn%2BtveV0auffnf7vWdiycTwa9HrmT9K3qi%2BOfrW9m3nZOjk03dp76anit6rvj%2F2gf2h%2B2P0x5Hp7E%2F4T5WfjT93fAn88ngmbWbm3%2FeE8%2FsyOll%2BAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEIWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS40LjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgICAgICAgICAgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIKICAgICAgICAgICAgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIj4KICAgICAgICAgPHRpZmY6UmVzb2x1dGlvblVuaXQ%2BMTwvdGlmZjpSZXNvbHV0aW9uVW5pdD4KICAgICAgICAgPHRpZmY6Q29tcHJlc3Npb24%2BNTwvdGlmZjpDb21wcmVzc2lvbj4KICAgICAgICAgPHRpZmY6WFJlc29sdXRpb24%2BNzI8L3RpZmY6WFJlc29sdXRpb24%2BCiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24%2BCiAgICAgICAgIDx0aWZmOllSZXNvbHV0aW9uPjcyPC90aWZmOllSZXNvbHV0aW9uPgogICAgICAgICA8ZXhpZjpQaXhlbFhEaW1lbnNpb24%2BMTA8L2V4aWY6UGl4ZWxYRGltZW5zaW9uPgogICAgICAgICA8ZXhpZjpDb2xvclNwYWNlPjE8L2V4aWY6Q29sb3JTcGFjZT4KICAgICAgICAgPGV4aWY6UGl4ZWxZRGltZW5zaW9uPjE8L2V4aWY6UGl4ZWxZRGltZW5zaW9uPgogICAgICAgICA8ZGM6c3ViamVjdD4KICAgICAgICAgICAgPHJkZjpCYWcvPgogICAgICAgICA8L2RjOnN1YmplY3Q%2BCiAgICAgICAgIDx4bXA6TW9kaWZ5RGF0ZT4yMDEzLTA5LTAyVDE3OjA5Ojg0PC94bXA6TW9kaWZ5RGF0ZT4KICAgICAgICAgPHhtcDpDcmVhdG9yVG9vbD5QaXhlbG1hdG9yIDIuMjwveG1wOkNyZWF0b3JUb29sPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KKQpBGAAAABVJREFUCB1jYEAC%2Bvr6%2F0EYSQjOBABJhQMZ%2BtBuwwAAAABJRU5ErkJggg%3D%3D) repeat 0 50%;
}
.content > .wrapper > .spread.single-page > .page.left { display: none;
}
.content > .wrapper > .spread.single-page > .page.right { width: 100%;
}
.content > .wrapper > .spread > .dummy { display: none;
}
.action { top: 0; left: 0 ; width: 320px; position: absolute; bottom: 0; padding: 0;
}
.action > a { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; display: block; text-align: center; margin: 30px auto; border: 2px solid black; width: 100px; cursor: pointer;
}
.action > a:hover { background-color: black; color: white;
}
.action .zoom-size { display: block; border: 2px solid black; margin: 30px auto; width: 100px; text-align: center;
}
.action .zoom-size:after { content: '%'; padding: 0 10px;
}

Viewer and markers selectors v2 DEMO - Script Codes JS Codes

window.acl = {};
window.acl.leftPageWidthRealSize = 0;
window.acl.leftPageHeightRealSize = 0;
window.acl.rightPageWidthRealSize = 0;
window.acl.rightPageHeightRealSize = 0;
window.acl.currentRatio = 1;
window.acl.stepRatio = 0.1;
window.acl.maxRatio = 1;
window.acl.preventNextClick = false;
window.acl.clickPressedAndHold = false;
window.acl.startOffsetX = 0;
window.acl.startOffsetY = 0;
var realSize = function(jQuerySelector){ // From https://css-tricks.com/snippets/jquery/get-an-images-native-width/ // Get on screen image var screenImage = jQuerySelector; // Create new offscreen image to test var theImage = new Image(); theImage.src = screenImage.attr("src"); // Get accurate measurements from that. return {width : theImage.width, height: theImage.height};
}
var fitRatio = function(){ var result = 0; var $wrapper = $('.wrapper'); var $spread = $wrapper.find('.spread'); var wrapperHeight = $wrapper.height(); var wrapperWidth = $wrapper.width(); var width = 0; var height = 0; var left = 0; var top = 0; if($spread.hasClass('single-page')){ var isLeftImage = !$('.left').hasClass('no-page'); var $selector; if(isLeftImage){ width = window.acl.leftPageWidthRealSize; height = window.acl.leftPageHeightRealSize; } else { width = window.acl.rightPageWidthRealSize; height = window.acl.rightPageHeightRealSize; } } else { width = (window.acl.leftPageWidthRealSize) + (window.acl.rightPageWidthRealSize); height = (window.acl.leftPageHeightRealSize > window.acl.rightPageHeightRealSize) ? window.acl.leftPageHeightRealSize : window.acl.rightPageHeightRealSize; } var ratioHeigh = wrapperHeight / height; var ratioWidth = wrapperWidth / width; return ratioHeigh > ratioWidth ? ratioWidth : ratioHeigh;
}
var zoom = function(ratio) { var $wrapper = $('.wrapper'); var $spread = $wrapper.find('.spread'); var wrapperHeight = $wrapper.height(); var wrapperWidth = $wrapper.width(); var width = 0; var height = 0; var left = 0; var top = 0; if($spread.hasClass('single-page')){ var isLeftImage = !$('.left').hasClass('no-page'); var $selector; if(isLeftImage){ width = window.acl.leftPageWidthRealSize * ratio; height = window.acl.leftPageHeightRealSize * ratio; } else { width = window.acl.rightPageWidthRealSize * ratio; height = window.acl.rightPageHeightRealSize * ratio; } } else { width = (window.acl.leftPageWidthRealSize* ratio) + (window.acl.rightPageWidthRealSize * ratio); height = (window.acl.leftPageHeightRealSize > window.acl.rightPageHeightRealSize) ? window.acl.leftPageHeightRealSize * ratio : window.acl.rightPageHeightRealSize * ratio; } $('.zoom-size').html((ratio * 100).toFixed(0)); // Center the spread left = (wrapperWidth - width) / 2; if(left < 0){ left = 0; } top = (wrapperHeight - height)/ 2; if(top < 0){ top = 0; } // Display the result $spread.width(width); $spread.height(height); $spread.css('left', left); $spread.css('top', top);
}
var zoomIn = function(){ window.acl.currentRatio += window.acl.stepRatio; if(window.acl.currentRatio > window.acl.maxRatio){ window.acl.currentRatio = window.acl.maxRatio; } zoom(window.acl.currentRatio);
}
var fit = function() { window.acl.currentRatio = fitRatio(); zoom(window.acl.currentRatio);
}
var zoomOut = function() { window.acl.currentRatio -= window.acl.stepRatio; if(window.acl.currentRatio <= 0.0001){ window.acl.currentRatio = window.acl.stepRatio; } zoom(window.acl.currentRatio);
}
var convert_to_percentage = function (el){ var parent = el.parent(); el.css({ left:parseFloat(el.css('left'))/parent.width() * 100 +"%", top: parseFloat(el.css('top'))/parent.height() * 100 +"%", width: ((parseFloat(el.width()) + 2) / parseFloat(parent.width())) * 100 +"%", height: ((parseFloat(el.height()) + 2) / parseFloat(parent.height())) * 100 +"%" });
}
var convert_to_percentage_drag = function (el){ var parent = el.parent(); el.css({ left:parseInt(el.css('left'))/parent.width()*100+"%", top: parseInt(el.css('top'))/parent.height()*100+"%", });
}
var setContainerSize = function (el) { var parent = $(el.target).parent().parent(); parent.css('height', parent.height() + "px");
}
var resetContainerSize = function (el) { parent.css('height', 'auto');
}
var resizeStop = function (event, ui){ convert_to_percentage($(this)); window.acl.preventNextClick = true;
}
var dragStop = function (event, ui){ convert_to_percentage_drag($(this)); window.acl.preventNextClick = true;
}
var setContainerResizer = function (event, ui) { $($(this)[0]).children('.ui-resizable-handle').mouseover(setContainerSize); $($(this)[0]).children('.ui-resizable-handle').mouseout(resetContainerSize);
}
$(document).ready(function(){ if(!$('.page.right').hasClass('no-page')){ $('.page.right img.full').one('load', function(){ $('.page.right').addClass('loaded'); }).each(function() { if(this.complete) { $('.page.right').addClass('loaded'); } }); } if(!$('.page.left').hasClass('no-page')){ $('.page.left img.full').one('load', function(){ $('.page.left').addClass('loaded'); }).each(function() { if(this.complete) { $('.page.left').addClass('loaded'); } }); } // Get left real image size var leftRealSize = realSize($('.left img.full')); window.acl.leftPageWidthRealSize = leftRealSize.width; window.acl.leftPageHeightRealSize = leftRealSize.height; // Get right real image size var rightRealSize = realSize($('.right img.full')); window.acl.rightPageWidthRealSize = rightRealSize.width; window.acl.rightPageHeightRealSize = rightRealSize.height; zoom(window.acl.currentRatio); $('.zoom-in').on('click', function() { zoomIn(); }); $('.fit').on('click', function() { fit(); }); $('.zoom-out').on('click', function() { zoomOut(); }); fit(); $(window).resize(function(){ // fit(); });
});
var refreshResize = function(){ $('.marker') .resizable( { containment: 'parent', handles: "n,ne,e,se,s,sw,w,nw", create: setContainerResizer, stop:resizeStop }).draggable( { containment: 'parent', stop:dragStop, colision: 'none' });
};
var activeMarkering = function(){ $('.markers').addClass('can-add-marker');
}
var desactiveMarkering = function(){ $('.markers').removeClass('can-add-marker');
}
$(document).ready(function() { $('.markers').mousedown(function(ev){ window.acl.clickPressedAndHold = true; if($('.markers').hasClass('can-add-marker')){ var top = (parseFloat(ev.offsetY) / parseFloat($('.markers').height()) * 100) + '%'; var left = (parseFloat(ev.offsetX) / parseFloat($('.markers').width()) * 100) + '%'; window.acl.startOffsetX = ev.offsetX; window.acl.startOffsetY = ev.offsetY; $('.markers').append('<div class="marker current-drawing resizable" style="width: 0%; height: 0%; top: ' + top + '; left: '+ left + ';"></div>'); } }); $('.markers').mousemove(function(ev){ if(window.acl.clickPressedAndHold){ var width = (ev.offsetX - window.acl.startOffsetX); var height = (ev.offsetY - window.acl.startOffsetY); $('.current-drawing').css('width',width + 'px'); $('.current-drawing').css('height',height + 'px'); } }); $('.markers').mouseup(function(){ window.acl.clickPressedAndHold = false; $('.current-drawing').removeClass('current-drawing'); activeMarkering(); refreshResize(); }); activeMarkering(); refreshResize(); $('.active-marker').click(function(){ activeMarkering(); });
});
Viewer and markers selectors v2 DEMO - Script Codes
Viewer and markers selectors v2 DEMO - Script Codes
Home Page Home
Developer Adrien Clerbois
Username AClerbois
Uploaded December 30, 2022
Rating 3
Size 14,466 Kb
Views 6,072
Do you need developer help for Viewer and markers selectors v2 DEMO?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Adrien Clerbois (AClerbois) Script Codes
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!