fix jaxtapose size wo reload

mlpc-ucsd · Dec 6, 2023 · 805bdde · 805bdde
1 parent a656eff
commit 805bdde
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 46 deletions.
diff --git a/index.html b/index.html
@@ -491,11 +491,8 @@ <h2 class="title is-3">
           <span class="big_text">
             A 
             <u>cat</u>
-            <!-- <span style="color: #6B4A2A;">cat</span> -->
             standing above a 
             <u>backpack</u>
-            <!-- <span style="color: #E70965;">backpack</span> -->
-
         </button>
         <div class="columns is-centered has-text-centered collapse_content">
           <!-- row 2 col 1 ori img -->
@@ -504,7 +501,7 @@ <h2 class="title is-3">
               <br>
               <span class="big_text">&nbsp;</span>
               <br><br>
-              <img src="static/jaxtapose_imgs/cat_backpack_44/rec_img.png">
+              <img id="jaxtapose_img_2" src="static/jaxtapose_imgs/cat_backpack_44/rec_img.png">
             </div>
           </div>
 
@@ -598,7 +595,7 @@ <h2 class="title is-3">
               <br>
               <span class="big_text">&nbsp;</span>
               <br><br>
-              <img src="static/jaxtapose_imgs/apple_orange_15351/rec_img.png">
+              <img id="jaxtapose_img_4" src="static/jaxtapose_imgs/apple_orange_15351/rec_img.png">
             </div>
           </div>
 
@@ -682,7 +679,7 @@ <h2 class="title is-3">
                   <br>
                   <span class="big_text">&nbsp;</span>
                   <br><br>
-                  <img src="static/jaxtapose_imgs/elephant_suitcase_106/rec_img.png">
+                  <img id="jaxtapose_img_3" src="static/jaxtapose_imgs/elephant_suitcase_106/rec_img.png">
                 </div>
               </div>
 
@@ -754,32 +751,21 @@ <h2 class="title is-3">
     <!-- row 3 apple bench heli -->
     <button class="collapsible">
       <span class="big_text">
-
         An 
         <u>apple</u>
-        <!-- <span style="color: #82E965;">
-          applpe
-        </span> -->
         on a 
         <u>bench</u>
-        <!-- <span style="color: #671C01;">
-          bench
-        </span> -->
         with a 
         <u>helicopter</u>
-        <!-- <span style="color: #8F0035;">
-          helicopter
-        </span>  -->
         behind it
-
     </button>
     <div class="columns is-centered has-text-centered collapse_content">
       <div class="column collapse_color">
         <div class="content">
           <br>
           <span class="big_text">&nbsp;</span>
           <br><br>
-          <img src="static/jaxtapose_imgs/apple_bench_heli_15407/rec_img.png">
+          <img id="jaxtapose_img_5" src="static/jaxtapose_imgs/apple_bench_heli_15407/rec_img.png">
         </div>
       </div>
 

diff --git a/static/js/index.js b/static/js/index.js
@@ -167,42 +167,51 @@ $(document).ready(function() {
 
         $(inter_slider_name).prop('max', frame_ls_i - 1);
       }(i));
-
-
     }
 
     bulmaSlider.attach();
-
 })
-function changeSize(){
-  const height= $('#resize_image1').height()
-  const width= $('#resize_image1').width()
-  $('#row_1_cake').height(height)
-  $('#row_1_cake').width(width)
-  $('#row_1_keyboard').height(height)
-  $('#row_1_keyboard').width(width)
-
-  if(height/width>1.5){
-    window.location.reload()
-  }
-}
-changeSize()
- window.addEventListener('resize', function(event) {
-      changeSize()
-      // if(height/width>1.5){
-      //   window.location.reload()
-      // }
-}, false);
+// function changeSize(){
+//   const height= $('#resize_image1').height()
+//   const width= $('#resize_image1').width()
+//   $('#row_1_cake').height(height)
+//   $('#row_1_cake').width(width)
+//   $('#row_1_keyboard').height(height)
+//   $('#row_1_keyboard').width(width)
+
+//   if(height/width>1.5){
+//     window.location.reload()
+//   }
+// }
+// changeSize()
+//  window.addEventListener('resize', function(event) {
+//       changeSize()
+//       // if(height/width>1.5){
+//       //   window.location.reload()
+//       // }
+// }, false);
 
 
 
 function set_jaxtapose_img_size(){
-  const height= $('#jaxtapose_img_1').height()
-  const width= $('#jaxtapose_img_1').width()
-  $('#row_1_cake').height(height)
-  $('#row_1_cake').width(width)
-  $('#row_1_keyboard').height(height)
-  $('#row_1_keyboard').width(width)
+
+  const jaxtapose_name_ls = [
+    ['#jaxtapose_img_1', '#row_1_cake', '#row_1_keyboard'],
+    ['#jaxtapose_img_2', '#row_2_cat', '#row_2_backpack'],
+    ["#jaxtapose_img_3", "#row_3_elephant", "#row_3_suitcase"],
+    ['#jaxtapose_img_4', '#row_4_apple', '#row_4_orange'],
+    ["#jaxtapose_img_5", "#row_5_apple", "#row_5_bench", "#row_5_helicopter"]
+  ]
+
+  for (var i = 0; i < jaxtapose_name_ls.length; i++) {
+    const origin_img_height = $(jaxtapose_name_ls[i][0]).height()
+    const origin_img_width = $(jaxtapose_name_ls[i][0]).width()
+
+    for (var j = 1; j < jaxtapose_name_ls[i].length; j++) {
+      $(jaxtapose_name_ls[i][j]).height(origin_img_height)
+      $(jaxtapose_name_ls[i][j]).width(origin_img_width)
+    }
+  }
 }
 
 const size_timeout = setInterval(