Merge pull request #1047 from codeRIT/bh-1034

Modal is up

Author: peterkos

index.html

@@ -65,69 +65,73 @@
                 <div class="wire"></div>
                 <div class="front-clip"></div>
                 <div class="back-clip"></div>
-                <img src="./assets/imgs/1.jpg" alt="BrickHack 6 attendees"/>
+                <img src="./assets/imgs/1.jpg" class="slide-image" alt="BrickHack 6 attendees"/>
             </div>
             <div class="slide">
                 <div class="wire"></div>
                 <div class="front-clip"></div>
                 <div class="back-clip"></div>
-                <img src="./assets/imgs/2.jpg" alt="BrickHack 6 attendees"/>
+                <img src="./assets/imgs/2.jpg" class="slide-image" alt="BrickHack 6 attendees"/>
             </div>
             <div class="slide">
                 <div class="wire"></div>
                 <div class="front-clip"></div>
                 <div class="back-clip"></div>
-                <img src="./assets/imgs/3.jpg" alt="BrickHack 6 attendees"/>
+                <img src="./assets/imgs/3.jpg" class="slide-image" alt="BrickHack 6 attendees"/>
             </div>
             <div class="slide">
                 <div class="wire"></div>
                 <div class="front-clip"></div>
                 <div class="back-clip"></div>
-                <img src="./assets/imgs/4.jpg" alt="BrickHack 6 attendees"/>
+                <img src="./assets/imgs/4.jpg" class="slide-image" alt="BrickHack 6 attendees"/>
             </div>
             <div class="slide">
                 <div class="wire"></div>
                 <div class="front-clip"></div>
                 <div class="back-clip"></div>
-                <img src="./assets/imgs/5.jpg" alt="BrickHack 6 attendees"/>
+                <img src="./assets/imgs/5.jpg" class="slide-image" alt="BrickHack 6 attendees"/>
             </div>
             <div class="slide">
                 <div class="wire"></div>
                 <div class="front-clip"></div>
                 <div class="back-clip"></div>
-                <img src="./assets/imgs/6.jpg" alt="BrickHack 6 attendees"/>
+                <img src="./assets/imgs/6.jpg" class="slide-image" alt="BrickHack 6 attendees"/>
             </div>
             <div class="slide">
                 <div class="wire"></div>
                 <div class="front-clip"></div>
                 <div class="back-clip"></div>
-                <img src="./assets/imgs/7.jpg" alt="BrickHack 6 attendees"/>
+                <img src="./assets/imgs/7.jpg" class="slide-image" alt="BrickHack 6 attendees"/>
             </div>
             <div class="slide">
                 <div class="wire"></div>
                 <div class="front-clip"></div>
                 <div class="back-clip"></div>
-                <img src="./assets/imgs/8.jpg" alt="BrickHack 6 attendees"/>
+                <img src="./assets/imgs/8.jpg" class="slide-image" alt="BrickHack 6 attendees"/>
             </div>
             <div class="slide">
                 <div class="wire"></div>
                 <div class="front-clip"></div>
                 <div class="back-clip"></div>
-                <img src="./assets/imgs/9.jpg" alt="BrickHack 6 attendees"/>
+                <img src="./assets/imgs/9.jpg" class="slide-image" alt="BrickHack 6 attendees"/>
             </div>
             <div class="slide">
                 <div class="wire"></div>
                 <div class="front-clip"></div>
                 <div class="back-clip"></div>
-                <img src="./assets/imgs/10.jpg" alt="BrickHack 6 attendees"/>
+                <img src="./assets/imgs/10.jpg" class="slide-image" alt="BrickHack 6 attendees"/>
             </div>
             <div class="slide">
                 <div class="wire"></div>
                 <div class="front-clip"></div>
                 <div class="back-clip"></div>
-                <img src="./assets/imgs/11.jpg" alt="BrickHack 6 attendees"/>
+                <img src="./assets/imgs/11.jpg" class="slide-image" alt="BrickHack 6 attendees"/>
             </div>
         </div>
+        <div id="modal">
+            <span id="close"><i id="close" class="fas fa-times"></i></span>
+            <img id="modal-content" alt="image from carousel">
+        </div>
         <div id="hackathon-content" class="section-pad">
             <div id="hackathon-text">
                 <h1>What is a Hackathon?</h1>

index.js

@@ -41,6 +41,32 @@ $(document).ready(function() {
     });
 });
 
+// Opens modal when img is clicked
+$(document).on('click', '.slide-image', function() {
+    $('#modal').show();
+    $('#modal-content').attr('src', this.src);
+});
+
+// Closes modal when X is clicked
+$(document).on('click', '#close', function() {
+    $('#modal').hide();
+});
+
+// Closes modal when window is clicked
+$(window).on('click', function(event) {
+    if (event.target == modal) {
+        $('#modal').hide();
+    }
+});
+
+// Closes modal when esc key is pressed
+$(document).on('keydown', function(event) {
+    if (event.key == "Escape") {
+        $('#modal').hide();
+    }
+});
+
+
 let card = document.getElementsByClassName("card");
 for (let i = 0; i < card.length; i++) {
     let accordion = card[i].getElementsByClassName("accordion-header")[0];