css/style.css

@@ -2,13 +2,23 @@ body {
     padding-top: 40px;
 }
 
+#outside {
+    cursor: pointer;
+	z-index:10; 
+	position:relative;
+}
+
 #rotator {
-    //background: #dddddd;
 	background: #ffffff;
 	// 90vh is 90% of viewer height: http://stackoverflow.com/a/16837667/2152245
     height:80vh;
-    overflow: hidden;
+	width:auto;
+    //overflow: hidden;
     cursor: pointer;
+	z-index:0; 
+	position: absolute;
+    left: 0px;
+    top: 0px;
 }
 
 #rotator img {
@@ -16,4 +26,4 @@ body {
     max-height:80vh;	
 	width:auto;
     margin: 0;
-}
+}

js/change.js

@@ -1,6 +1,6 @@
 // Script settings.
-var slideDuration = 500;
-var blankDuration = 200;
+var slideDuration = 600;
+var blankDuration = 400;
 
 // Script internals.
 var $currentSlide;
@@ -22,7 +22,7 @@ $(document).ready(function(){
 
     startTime = d1.getTime();
 
-    $('#rotator').mousedown(function(event){
+    $('#outside').mousedown(function(event){
         document.getElementById('xcoordinate').value = event.pageX - this.offsetLeft;
         document.getElementById('ycoordinate').value = event.pageY - this.offsetTop;
         var d2 = new Date(); var endTime = d2.getTime();

views/change.html.twig

@@ -7,10 +7,14 @@
     <div id="placeholder" class="well">
         <p>Please wait while the images are loaded.</p>
     </div>
+	<div id="outside">
+		<!-- This hidden image keeps the div open and the right size, even when #rotator is hidden in change.js. -->
+		<img src="{{ imageWithElement}}" style="visibility:hidden; position:relative;">
     <div id="rotator" class="hide">
         <img src="{{ imageWithElement}}">
         <img src="{{ imageWithoutElement}}">
     </div>
+	</div>
     <form method="post" action="" name="changeform" id="changeform">
         <input type="hidden" name="xcoordinate" id="xcoordinate" value="0">
         <input type="hidden" name="ycoordinate" id="ycoordinate" value="0">