use Modal Images for controller images

_hardware/controllers.md

@@ -753,14 +753,14 @@ Marlin supports a wide variety of display controllers, from simple character-bas
     <iframe class="youtube rj" width="300" height="225" src="https://youtube.com/embed/{{ videoid }}"></iframe>
   {% endfor %}
   {% for img in cont.images %}
-    {% if img.front %}<a href="{{ fldr }}{{ img.front }}_front.jpg" target="_blank" title="{{ img.alt }} Front"><img src="{{ fldr }}{{ img.front }}_front_thumb.jpg" alt="{{ img.alt }} Front"></a>{% endif %}
+    {% if img.front %}<img class="myImages" id="myImg" src="{{ fldr }}{{ img.front }}_front.jpg" alt="{{ img.alt }} Front" style="width:100%;max-width:300px">{% endif %}
     {% if img.back -%}
       {% if img.back.size > 1 %}
         {% for bimg in img.back %}
-          <a href="{{ fldr }}{{ bimg }}_back.jpg" target="_blank" title="{{ img.alt }} Back"><img src="{{ fldr }}{{ bimg }}_back_thumb.jpg" alt="{{ img.alt }} Back"></a>
+          <img class="myImages" id="myImg" src="{{ fldr }}{{ bimg }}_back.jpg" alt="{{ img.alt }} Back" style="width:100%;max-width:300px">
         {% endfor %}
       {% else %}
-        <a href="{{ fldr }}{{ img.back }}_back.jpg" target="_blank" title="{{ img.alt }} Back"><img src="{{ fldr }}{{ img.back }}_back_thumb.jpg" alt="{{ img.alt }} Back"></a>
+          <img class="myImages" id="myImg" src="{{ fldr }}{{ img.back }}_back.jpg" alt="{{ img.alt }} Back" style="width:100%;max-width:300px">
       {% endif %}
     {%- endif %}
   {% endfor %}
@@ -773,4 +773,13 @@ Marlin supports a wide variety of display controllers, from simple character-bas
 **[Please contribute…](/docs/development/contributing.html#contribute-documentation)**
 {% endif %}
 {% endfor %}
+  <!-- The Modal -->
+<div id="myModal" class="modal">
+  <!-- The Close Button -->
+  <span class="modalclose">&times;</span>
+  <!-- Modal Content (The Image) -->
+  <img class="modal-content" id="img01">
+  <!-- Modal Caption (Image Text) -->
+  <div id="caption"></div>
+</div>
 <!-- end: Generated by Jekyll -->

_sass/_custom.scss

@@ -1362,3 +1362,92 @@ div.tags { display: inline-block; float: right; margin: 0.5em; }
 }
 
 .fa-x:before { content: "𝕏"; }
+
+#myImg {
+  border-radius: 5px;
+  cursor: pointer;
+  transition: 0.3s;
+}
+
+#myImg:hover {
+  opacity: 0.7;
+}
+
+.modal {
+  display: none;
+  /* Hidden by default */
+  position: fixed;
+  /* Stay in place */
+  z-index: 1;
+  /* Sit on top */
+  padding-top: 100px;
+  /* Location of the box */
+  left: 0;
+  top: 0;
+  width: 100%;
+  /* Full width */
+  height: 100%;
+  /* Full height */
+  overflow: auto;
+  /* Enable scroll if needed */
+  background-color: var(--color-hl-pre);
+  /* Fallback color */
+  background-color: rgba(var(--color-hl-pre), 0.9);
+  /* Black w/ opacity */
+}
+
+.modal-content {
+  margin: auto;
+  display: block;
+  width: 80%;
+  /*max-width: 700px;*/
+}
+
+#caption {
+  margin: auto;
+  display: block;
+  width: 80%;
+  max-width: 700px;
+  text-align: center;
+  color: var(--color-tool-header);
+  padding: 10px 0;
+  height: 150px;
+}
+
+.modal-content,
+#caption {
+  animation-name: zoom;
+  animation-duration: 0.6s;
+}
+
+@keyframes zoom {
+  from {
+    transform: scale(0)
+  }
+  to {
+    transform: scale(1)
+  }
+}
+
+.modalclose {
+  position: absolute;
+  top: 40px;
+  right: 35px;
+  color: var(--color-tool-header);
+  font-size: 40px;
+  font-weight: bold;
+  transition: 0.3s;
+}
+
+.modalclose:hover,
+.modalclose:focus {
+  color: #bbb;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+@media only screen and (max-width: 700px) {
+  .modal-content {
+    width: 100%;
+  }
+}

assets/javascript/custom.js

@@ -193,3 +193,29 @@ $(function() {
   // Fire the singleton init on document.ready
   jekyllSearch.init();
 });
+
+// create references to the modal...
+var modal = document.getElementById('myModal');
+// to all images -- note I'm using a class!
+var images = document.getElementsByClassName('myImages');
+// the image in the modal
+var modalImg = document.getElementById("img01");
+// and the caption in the modal
+var captionText = document.getElementById("caption");
+
+// Go through all of the images with our custom class
+for (var i = 0; i < images.length; i++) {
+  var img = images[i];
+  // and attach our click listener for this image.
+  img.onclick = function(evt) {
+    modal.style.display = "block";
+    modalImg.src = this.src;
+    captionText.innerHTML = this.alt;
+  }
+}
+
+var span = document.getElementsByClassName("modalclose")[0];
+
+span.onclick = function() {
+  modal.style.display = "none";
+}