Ideas how to ROTATE (2) images Simultaneously from one slider?
Hi everyone, I'm trying to work with Jquery to have (2) images, the same image actually, side by side abutting each other with a slider control for rotate and scale where changing the value of either slider will cause both images to respond simultaneously. I'm working from a project called ImageEditor, with the code I've modified already from it below. From what I can tell being totally new to JQuery, I need to get this line of code:
oninput="editor.rotateImage(this.value);"
to not just control "editor" but "editorb" as well?
In my example, the images are not side by side but top and bottom orientation, as I haven't yet figured out how to get them to line up side by side. Thanks for your patience folks, this is my first delve into JQuery from total left field, so I understand this may be a reaaaaal newbie issue!
---------------------------------------
<!DOCTYPE html>
<!-- saved from url=(0048)
http://jackgit.github.io/image-editor/index.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>ImageEditor Demo</title>
<script src="jquery-3.5.1.min.js" crossorigin="anonymous"></script>
<script>FM.init({ projectId: '5983ee4e9a85353d3ce5222a' })</script>
<style>
* {
margin: 0;
padding: 0;
font-family: arial;
}
.left {
width: 1600px;
margin: auto;
padding: 0px;
}
.right {
width: 1600px;
margin: auto;
padding: 0px;
}
#editor {
margin-top: 0x;
border: 0px white;
}
#editorb {
margin-top: 0px;
border: 0px white;
}
.tool-control {
display: flex;
margin-top: 0px;
}
.flex-1 {
flex: 1;
}
.flex-2 {
flex: 2;
}
.flex-3 {
flex: 3;
}
.flex-4 {
flex: 4;
}
#frameList > li {
display: inline-block;
}
.pri-btn {
padding: 10px;
border-radius: 5px;
margin-right: 20px;
}
#outputs {
margin-top: 0px;
border-top: 1px dashed grey;
}
</style>
<script src="jquery-3.5.1.min.js"></script>
<script src="./ImageEditor Demo_files/hammer.min.js.download"></script>
<script src="./ImageEditor Demo_files/ImageEditor.js.download"></script>
<script>
$(document).ready(function() {
editor = $('#editor').ImageEditor({
imageUrls: [
'./ImageEditor Demo_files/IMAGE.png'
],
removeIcon: './ImageEditor Demo_files/delete.png',
width:400,
height: 200,
onInitCompleted: function() {
editor.selectImage(2);
}
});
});
function confirmImage() {
var cvs = editor.mergeImage(),
$img = $('<img>');
$img.attr('src', cvs.toDataURL());
//$('#outputs').append($img);
$('#outputs').append($(cvs));
}
$(document).ready(function() {
editorb = $('#editorb').ImageEditor({
imageUrls: [
'./ImageEditor Demo_files/IMAGE.png'
],
removeIcon: './ImageEditor Demo_files/delete.png',
width:400,
height: 200,
onInitCompleted: function() {
editorb.selectImage(2);
}
});
});
function confirmImage() {
var cvs = editorb.mergeImage(),
$img = $('<img>');
$img.attr('src', cvs.toDataURL());
//$('#outputs').append($img);
$('#outputs').append($(cvs));
}
</script>
</head>
<body>
<div class="left">
<div id="editor" style="touch-action: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); position: relative; height: 1200px; width: 800px; overflow: hidden;"><span style="left: 0px; top: 0px; box-sizing: border-box; position: relative; z-index: 8; touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transform: translate(5px, -4px) scale(1, 1) rotate(0deg);"></span></div> <div class="left">
<div id="editorb" style="touch-action: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); position: relative; height: 1200px; width: 800px; overflow: hidden;"><span style="left: 0px; top: 0px; box-sizing: border-box; position: relative; z-index: 8; touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transform: translate(5px, -4px) scale(1, 1) rotate(0deg);"></span></div>
<div class="tool-control">
<input class="flex-4" type="text" id="picUrl" placeholder="image url">
<button class="flex-1" onclick="editor.setImage($("#picUrl").val(), 0)">Change Picture</button>
</div>
<div class="tool-control">
<label class="flex-1">ROTATE</label>
<input class="flex-2" type="range" min="-180" max="180" id="rotateControl" oninput="editor.rotateImage(this.value);">
</div>
<div class="tool-control">
<label class="flex-1">SCALE</label>
<input class="flex-2" type="range" id="scaleControl" min="0.1" max="2.0" step="0.05" oninput="editor.scaleImage(this.value, this.value);">
</div>
<div class="tool-control">
<button class="pri-btn" onclick="confirmImage()">Confirm</button>
</div>
<div id="outputs">
</div>
</div>
</body></html>