tweaks + draggable...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2016-11-22 04:08:45 +03:00
parent 24a36b9ee8
commit a2e13d1b08
2 changed files with 9339 additions and 15 deletions

View File

@ -14,6 +14,7 @@
background: gray; background: gray;
} }
/* center marker */
.viewer:after { .viewer:after {
position: absolute; position: absolute;
content: ""; content: "";
@ -21,14 +22,15 @@
font-size: 0pt; font-size: 0pt;
box-sizing: border-box; box-sizing: border-box;
width: 16px; width: 8px;
height: 16px; height: 8px;
top: 50%; top: 50%;
left: 50%; left: 50%;
margin-top: -8px; margin-top: -4px;
margin-left: -8px; margin-left: -4px;
border: solid 3px blue; border: solid 2px rgba(0, 0, 255, 0.3);
border-radius: 50%;
} }
@ -131,8 +133,6 @@
<script src="../ext-lib/jquery.js"></script> <script src="../ext-lib/jquery.js"></script>
<script src="../ext-lib/jquery-ui.js"></script> <script src="../ext-lib/jquery-ui.js"></script>
<script src="../lib/jli.js"></script>
<script> <script>
$(function(){ $(function(){
@ -172,9 +172,21 @@ $(function(){
}) })
$('.ribbon-set')
.draggable()
$('.drag-reset')
.click(function(){
$('.ribbon-set').css({
top: '',
left: '',
})
})
var ribbon_scale var ribbon_scale
var single_scale var single_scale
$('.single-image-toggle') $('.single-image-toggle')
.click(function(){ .click(function(){
var ribbon_set = $('.ribbon-set') var ribbon_set = $('.ribbon-set')
@ -197,6 +209,7 @@ $(function(){
}) })
$('.zoom-reset') $('.zoom-reset')
.click(function(){ .click(function(){
var ribbon_set = $('.ribbon-set') var ribbon_set = $('.ribbon-set')
@ -249,7 +262,7 @@ $(function(){
<body> <body>
<button class="single-image-toggle">&#128915;</button> <button class="single-image-toggle">&#9635;</button>
&nbsp; &nbsp;
<button class="zoom-in">+</button> <button class="zoom-in">+</button>
<button class="zoom-reset">1x</button> <button class="zoom-reset">1x</button>
@ -259,7 +272,9 @@ $(function(){
<button class="rotate-reset">0&deg;</button> <button class="rotate-reset">0&deg;</button>
<button class="rotate-cw">&#8635;</button> <button class="rotate-cw">&#8635;</button>
&nbsp; &nbsp;
<button class="rotate-reset zoom-reset">0&deg; 1x</button> <button class="drag-reset">(0,0)</button>
&nbsp;
<button class="rotate-reset zoom-reset drag-reset">reset all</button>
<div class="viewer"> <div class="viewer">
@ -274,7 +289,7 @@ $(function(){
<div class="ribbon"> <div class="ribbon">
<div class="image"></div> <div class="image"></div>
<div class="image"></div> <div class="image"></div>
<div class="current image"/> </div> <div class="current image"/></div>
<div class="image"></div> <div class="image"></div>
<div class="image"></div> <div class="image"></div>
<div class="image"></div> <div class="image"></div>

File diff suppressed because one or more lines are too long