Layout, Thumbnail

deep-daiv-Computer-Vision · Jul 19, 2024 · bc4e839 · bc4e839
1 parent cb98ff6
commit bc4e839
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 48 deletions.
diff --git a/index.html b/index.html
@@ -216,65 +216,50 @@ <h2 class="title is-3">Visual Comparisons</h2>
           <img src="static/images/comparsion/viscombird3.jpg" style="width:43.5%">
           <img src="static/images/comparsion/viscombird2.jpg" style="width:43.5%">
         </div>
-        <div class="columns is-centered">
-
-          <div class="column">
-            <div class="content">
-              <div class="columns is-centered">
-                <div class="column is-full-width">
-                  <div id="example1" class="bal-container-small" style="padding-bottom: 150%;">
-                    <div class="bal-after">
-                      <img src="./static/images/comparsion/rendering.png">
-                      <div class="bal-afterPosition afterLabel" style="z-index:1;">
-                        Ours
+
+        <div>
+          <div class="columns is-centered">
+
+            <div class="column">
+              <div class="content">
+                <div class="columns is-centered">
+                  <div class="column is-full-width">
+                    <div id="example1" class="bal-container-small" style="padding-bottom: 150%;">
+                      <div class="bal-after">
+                        <img id='img_input1' src="./static/images/comparsion/rendering.png">
+                        <div class="bal-afterPosition afterLabel" style="z-index:1;">
+                          Ours
+                        </div>
                       </div>
-                    </div>
-                    <div class="bal-before" style="width:96.4968152866242%;">
-                      <div class="bal-before-inset" style="width: 539px;">
-                        <img src="./static/images/comparsion/origin.png">
-                        <div class="bal-beforePosition beforeLabel">
-                          Origin
+                      <div class="bal-before" style="width:96.4968152866242%;">
+                        <div class="bal-before-inset" style="width: 539px;">
+                          <img id='img_input2' src="./static/images/comparsion/origin.png">
+                          <div class="bal-beforePosition beforeLabel">
+                            Origin
+                          </div>
                         </div>
                       </div>
-                    </div>
-                    <div class="bal-handle" style="left:96.4968152866242%;">
-                      <span class=" handle-left-arrow"></span>
-                      <span class="handle-right-arrow"></span>
+                      <div class="bal-handle" style="left:96.4968152866242%;">
+                        <span class=" handle-left-arrow"></span>
+                        <span class="handle-right-arrow"></span>
+                      </div>
                     </div>
                   </div>
                 </div>
-
               </div>
             </div>
           </div>
-          <div class="column">
-            <div class="columns is-centered">
-              <div class="column content">
-                <div id="example2" class="bal-container-small" style="padding-bottom: 150%;">
-                  <div class="bal-after">
-                    <img src="./static/images/comparsion/2_comp_after_23.jpg">
-                    <div class="bal-afterPosition afterLabel" style="z-index:1;">
-                      Ours
-                    </div>
-                  </div>
 
-                  <div class="bal-before" style="width:62.10191082802548%;">
-                    <div class="bal-before-inset" style="width: 539px;">
-                      <img src="./static/images/comparsion/2_comp_before_23.jpg">
-                      <div class="bal-beforePosition beforeLabel">
-                        Origin
-                      </div>
-                    </div>
-                  </div>
-                  <div class="bal-handle" style="left:62.10191082802548%;">
-                    <span class=" handle-left-arrow"></span>
-                    <span class="handle-right-arrow"></span>
-                  </div>
-                </div>
-              </div>
-            </div>
+          <div class ="example-select" style="display: flex; justify-content: center; gap: 50px; padding-bottom: 30px;">
+            <a class = "example-item" onclick="changeExample('./static/images/comparsion/rendering.png','./static/images/comparsion/origin.png')">
+              <img src="./static/images/comparsion/origin.png">
+            </a>  
+            <a class = "example-item" onclick="changeExample('./static/images/comparsion/2_comp_after_23.jpg','./static/images/comparsion/2_comp_before_23.jpg')">
+              <img src="./static/images/comparsion/2_comp_before_23.jpg">
+            </a>
           </div>
-
+
+         </div>
         </div>
       </div>
     </div>

diff --git a/static/css/index.css b/static/css/index.css
@@ -385,3 +385,26 @@ body {
   font-style: normal;
   display: inline-block;
 }
+
+.example-select {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 300px;
+  height: 100px;
+  margin-bottom: auto;
+}
+
+.example-item{
+  margin-left: auto;
+  margin-right: auto;
+  width: 100%;
+  height: 100%;
+}
+
+.example-item  img{
+  width: 100%;
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
diff --git a/static/js/index.js b/static/js/index.js
@@ -77,3 +77,10 @@ $(document).ready(function() {
     bulmaSlider.attach();
 
 })
+
+function changeExample(imgSrc1,imgSrc2){
+  vid = document.getElementById("img_input1");
+  vid.src = imgSrc1;
+  vid = document.getElementById("img_input2");
+  vid.src = imgSrc2;
+}