Added automatic slideshow

output/construction.html

@@ -14,6 +14,8 @@
     </header>
     
     <div class='content'>
+    <script src="/theme/js/slideshow.js"></script>
+
     <h1 class='article-title'>Construction</h1>
     <div class="article">
         <div class='article-content column'> <p><audio controls="controls" 
@@ -23,13 +25,24 @@
     Your browser does not support the HTML5 Audio element.
 </audio></p></div>
         <div class='article-img column'>
-                <img alt="" src="/images/Construction/Construction-1.jpg">
-                <img alt="" src="/images/Construction/Construction-2.jpg">
-                <img alt="" src="/images/Construction/Construction-3.jpg">
-                <img alt="" src="/images/Construction/Construction-4.jpg">
-                <img alt="" src="/images/Construction/Construction-5.jpg">
+                <img alt="" onclick="showSlide('img-1')" src="/images/Construction/Construction-1.jpg">
+                <img alt="" onclick="showSlide('img-2')" src="/images/Construction/Construction-2.jpg">
+                <img alt="" onclick="showSlide('img-3')" src="/images/Construction/Construction-3.jpg">
+                <img alt="" onclick="showSlide('img-4')" src="/images/Construction/Construction-4.jpg">
+                <img alt="" onclick="showSlide('img-5')" src="/images/Construction/Construction-5.jpg">
         </div>
     </div>
+
+    <div id="slide-container">
+        <div id="close-modal" onclick="closeModal()">X</div>
+        <div id="slides" class="modal">
+                <img class="slide" id="img-1" alt="" src="/images/Construction/Construction-1.jpg">
+                <img class="slide" id="img-2" alt="" src="/images/Construction/Construction-2.jpg">
+                <img class="slide" id="img-3" alt="" src="/images/Construction/Construction-3.jpg">
+                <img class="slide" id="img-4" alt="" src="/images/Construction/Construction-4.jpg">
+                <img class="slide" id="img-5" alt="" src="/images/Construction/Construction-5.jpg">
+        </div>
+    </div> 
     </div>
 </body>
 

output/courtyard.html

@@ -14,6 +14,8 @@
     </header>
     
     <div class='content'>
+    <script src="/theme/js/slideshow.js"></script>
+
     <h1 class='article-title'>Courtyard</h1>
     <div class="article">
         <div class='article-content column'> <p><audio controls="controls" 
@@ -34,13 +36,24 @@ He also comments with either self-pity or candid interest everything he undertak
 <p>He goes to the balcony twice a day to smoke a cigarette. It overlooks the courtyard, so it is just outside enough to give himself the impression that he is going somewhere. The junk and the dust lingering on the other balconies have made space to allow a chair and a reading person to get a bit of sunlight.
 He can hear neighbors laughing out loud, as they always had in peaceful sunny spring afternoon. They started to watch an old TV show last week. He knows the ending and can even tell some lines.</p></div>
         <div class='article-img column'>
-                <img alt="" src="/images/Courtyard/Courtyard-1.jpg">
-                <img alt="" src="/images/Courtyard/Courtyard-2.jpg">
-                <img alt="" src="/images/Courtyard/Courtyard-3.jpg">
-                <img alt="" src="/images/Courtyard/Courtyard-4.jpg">
-                <img alt="" src="/images/Courtyard/Courtyard-5.jpg">
+                <img alt="" onclick="showSlide('img-1')" src="/images/Courtyard/Courtyard-1.jpg">
+                <img alt="" onclick="showSlide('img-2')" src="/images/Courtyard/Courtyard-2.jpg">
+                <img alt="" onclick="showSlide('img-3')" src="/images/Courtyard/Courtyard-3.jpg">
+                <img alt="" onclick="showSlide('img-4')" src="/images/Courtyard/Courtyard-4.jpg">
+                <img alt="" onclick="showSlide('img-5')" src="/images/Courtyard/Courtyard-5.jpg">
         </div>
     </div>
+
+    <div id="slide-container">
+        <div id="close-modal" onclick="closeModal()">X</div>
+        <div id="slides" class="modal">
+                <img class="slide" id="img-1" alt="" src="/images/Courtyard/Courtyard-1.jpg">
+                <img class="slide" id="img-2" alt="" src="/images/Courtyard/Courtyard-2.jpg">
+                <img class="slide" id="img-3" alt="" src="/images/Courtyard/Courtyard-3.jpg">
+                <img class="slide" id="img-4" alt="" src="/images/Courtyard/Courtyard-4.jpg">
+                <img class="slide" id="img-5" alt="" src="/images/Courtyard/Courtyard-5.jpg">
+        </div>
+    </div> 
     </div>
 </body>
 

output/sunday.html

@@ -14,6 +14,8 @@
     </header>
     
     <div class='content'>
+    <script src="/theme/js/slideshow.js"></script>
+
     <h1 class='article-title'>Sunday</h1>
     <div class="article">
         <div class='article-content column'> <p><audio controls="controls" 
@@ -23,13 +25,24 @@
     Your browser does not support the HTML5 Audio element.
 </audio></p></div>
         <div class='article-img column'>
-                <img alt="" src="/images/Sunday/Sunday-1.jpg">
-                <img alt="" src="/images/Sunday/Sunday-2.jpg">
-                <img alt="" src="/images/Sunday/Sunday-3.jpg">
-                <img alt="" src="/images/Sunday/Sunday-4.jpg">
-                <img alt="" src="/images/Sunday/Sunday-5.jpg">
+                <img alt="" onclick="showSlide('img-1')" src="/images/Sunday/Sunday-1.jpg">
+                <img alt="" onclick="showSlide('img-2')" src="/images/Sunday/Sunday-2.jpg">
+                <img alt="" onclick="showSlide('img-3')" src="/images/Sunday/Sunday-3.jpg">
+                <img alt="" onclick="showSlide('img-4')" src="/images/Sunday/Sunday-4.jpg">
+                <img alt="" onclick="showSlide('img-5')" src="/images/Sunday/Sunday-5.jpg">
         </div>
     </div>
+
+    <div id="slide-container">
+        <div id="close-modal" onclick="closeModal()">X</div>
+        <div id="slides" class="modal">
+                <img class="slide" id="img-1" alt="" src="/images/Sunday/Sunday-1.jpg">
+                <img class="slide" id="img-2" alt="" src="/images/Sunday/Sunday-2.jpg">
+                <img class="slide" id="img-3" alt="" src="/images/Sunday/Sunday-3.jpg">
+                <img class="slide" id="img-4" alt="" src="/images/Sunday/Sunday-4.jpg">
+                <img class="slide" id="img-5" alt="" src="/images/Sunday/Sunday-5.jpg">
+        </div>
+    </div> 
     </div>
 </body>
 

output/theme/css/main-v2.css

@@ -187,4 +187,44 @@ p a {
     float: left; 
     width: 50%;
     padding: 15px;
+}
+
+#slide-container {
+    display: none;
+    width: 100%;
+    height: 300%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    overflow: hidden; 
+    background-color: #000000;
+    text-align: center;
+    padding-top: 100px;
+}
+
+.slide {
+    /* hide by default  */
+    display: none;
+    position: relative;
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 80%;
+    max-height: 80%;
+    width: auto;
+    height: auto; 
+    background-color: black;
+}
+
+#close-modal {
+    position: fixed;
+    font-family: Arial, Helvetica, sans-serif;
+    font-weight: bold;
+    color: white;
+    width: 20px;
+    height:20px; 
+    margin-left: 95%;
+}
+
+#close-modal:hover {
+    font-size: larger;
 }

output/theme/js/slideshow.js

@@ -0,0 +1,31 @@
+window.onload = function(){
+    // close on esc key
+    document.addEventListener('keydown', function(event){
+        if(event.keyCode === 27){
+            closeModal()
+        }
+
+    });
+}
+
+// Close the Modal
+function closeModal() {
+    document.getElementById("slide-container").style.display = "none"
+    elems = document.getElementsByClassName('slide')
+    for(let i=0; i<elems.length; i++){
+        elems[i].style.display = "none"
+    }
+}
+
+function showSlide(id){
+    isOpen = true
+    document.getElementById('slide-container').style.display = "block"
+    document.getElementById(id).style.display = "block"
+    goToTop()
+}
+
+// When the user clicks on an image, scroll to the top
+function goToTop() {
+    document.body.scrollTop = 0 //  safari
+    document.documentElement.scrollTop = 0 // Chrome, Firefox, IE and Opera
+}