fixed modal

www/css/autodoc.css

 }
 
 .autodoc_valign {
-	margin-top: auto;
-	margin-bottom: auto;
-}
+	padding-top: 50%;
+}

www/index.html

             </div>
             <div class="modal-body autodoc_home_modal_body">
               <div class="row">
-                <div id="autodoc_home_modal_left" class="col-1 autodoc_valign text-secondary">
+                <div id="autodoc_home_modal_left" class="col-1 autodoc_valign text-light bg-secondary" style="opacity: 0.15;">
                   <i class="fas fa-3x fa-chevron-circle-left"></i>
                 </div>
                 <div class="col">
                   <img class="img-fluid" id="autodoc_home_modal_img" />
                 </div>
-                <div id="autodoc_home_modal_right" class="col-1 autodoc_valign text-secondary">
+                <div id="autodoc_home_modal_right" class="col-1 autodoc_valign text-light bg-secondary" style="opacity: 0.15;">
                   <i class="fas fa-3x fa-chevron-circle-right"></i>
                 </div>
               </div>
   <script src="js/autodoc.js"></script>
 </body>
 
-</html>
+</html>

www/js/autodoc.js

   });
 
   $('#autodoc_home_modal_left').mouseenter(function(e) {
-      $(e.target).addClass("text-light bg-secondary");
-      $(e.target).removeClass("text-secondary bg-light");
+      $(e.target).fadeTo("slow", 0.8);
     })
     .mouseleave(function(e) {
-      $(e.target).removeClass("text-light bg-secondary");
-      $(e.target).addClass("text-secondary bg-light");
+      $(e.target).fadeTo("slow", 0.15);
+    })
+    .click(function(e) {
+home_modal_page_prev();
+    });
+
+  $('#autodoc_home_modal_right').mouseenter(function(e) {
+      $(e.target).fadeTo("slow", 0.8);
+    })
+    .mouseleave(function(e) {
+      $(e.target).fadeTo("slow", 0.15);
+    })
+    .click(function(e) {
+home_modal_page_next();
     });
 
 });
 }
 
 
-function home_modal_open(docid) {
+function home_modal_page(pageNum) {
+  var doc       = $('#autodoc_home_modal_body').data('document');
+  var pageTotal = doc.pageId.length();
+
+  $('#autodoc_home_modal_body').data('pageNum', pageNum);
+
   $('#autodoc_home_modal_img').attr('src',
-    conf.openapi +
-    "/documents/" +
-    docid +
-    "/image");
+	conf.openapi +
+	"/pages/" +
+	doc.pageId[pageNum] +
+	"/image");
+}
 
-  $('#autodoc_home_modal').modal('show');
+function home_modal_page_prev() {
+	home_modal_page(
+		$('#autodoc_home_modal_body').data('pageNum') - 1 );
+}
+
+function home_modal_page_next() {
+	home_modal_page(
+		$('#autodoc_home_modal_body').data('pageNum') + 1 );
+}
+
+function home_modal_open(docid) {
+  $.getJSON(conf.openapi + "/documents/" + docid, function(data) {
+	$('#autodoc_home_modal_body').data('document', data);
+  	home_modal_page(data.primaryPage);
+        $('#autodoc_home_modal').modal('show');
+  });
 }
 
 function home_modal_close(docid) {
   $('#autodoc_home_modal').modal('hide');
-}
+}