Update

SeeChen · Oct 4, 2024 · bf2d5f5 · bf2d5f5
1 parent d2d7cec
commit bf2d5f5
Show file tree

Hide file tree

Showing 23 changed files with 688 additions and 24 deletions.
diff --git a/CSS/index/lens.css b/CSS/index/lens.css
@@ -73,7 +73,10 @@
 
 #my_lens_account_icon img {
     width: 4em;
+    /* height: 4em; */
     padding: 1em;
+    /* border-radius: 100%; */
+    /* border: 0.25em solid rgba(0, 0, 0, 0.2); */
 }
 
 #area_lens_content {
@@ -83,19 +86,44 @@
 
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
-    grid-auto-rows: 1em;
-    column-gap: 1px;
+    grid-auto-rows: 0.5;
+    column-gap: 2px;
+    row-gap: 2px;
 
-    border: 1px solid #000;
+    /* border: 1px solid #000; */
 }
 
 #area_lens_content .lens_content {
-
-    padding: 0.5em;
     grid-row-start: auto;
-    border: 1px solid red;
     word-break: break-all;
     word-wrap: break-word;
+    text-align: center;
+}
+
+#area_lens_content .lens_content img {
+    width: 98%;
+    margin: auto;
+    /* border: 0.1em solid rgba(0, 0, 0, 0.2); */
+    border-radius: 1em;
+}
+
+#area_lens_content .lens_content .img_tag {
+    text-align: left;
+    width: 95%;
+    margin: auto;
+}
+
+#area_lens_content .lens_content .img_tag span {
+    padding: 1px 10px;
+    border: 2px solid #999;
+    border-radius: 1em;
+    color: #FFFFFF;
+    background: rgba(0, 0, 0, 0.2);
+    word-break: keep-all;
+    word-wrap: normal;
+    display: inline-block;
+    margin: 1px auto;
+    font-size: 0.75em;
 }
 
 @media screen and (max-width: 750px) {
@@ -111,6 +139,7 @@
         padding: 0.5em;
     }
     #area_lens_content {
+        width: 99%;
         grid-template-columns: repeat(auto-fill, minmax(8em, 1fr));
     }
 }
diff --git a/JS/General/navigation_bar.js b/JS/General/navigation_bar.js
@@ -19,4 +19,6 @@ function navigation_bar_onclick() {
 
         $('#main_content_table').css('margin-left', '-400%');
     });
+
+
 }
diff --git a/JS/INDEX/index.js b/JS/INDEX/index.js
@@ -29,6 +29,10 @@ window.onload = function() {
     asyncFunction();
 
     lensLayout();
+
+    $(window).resize(function() {
+        lensLayout();
+    });
 }
 
 async function asyncFunction() {

diff --git a/JS/INDEX/lens.js b/JS/INDEX/lens.js
@@ -1,17 +1,36 @@
 function lensLayout() {
 
     let Client_Width = $('.lens_content')[0].clientWidth;
+    $('.lens_content:eq(0)').css('display', 'none');
+    $.getJSON('../../JSON/LAYOUT/lens_image.json', function(data) {
 
-    for(let i = 0; i < 100; i++) {
+        data.sort(function() {
+            return Math.random() - 0.5;
+        })
 
-        let randomNum = Math.random() * (50 - 10) + 10;
-        randomNum = Math.floor(randomNum)
+        $('#area_lens_content').html("")
+        for(let i = 0; i < data.length; i++) {
 
-        $('#area_lens_content').html(
-            $('#area_lens_content').html()
-            + '<p class="lens_content" style="grid-row-end:' + `span ${randomNum}` + '">' + randomNum + '</p>'
-        );
-    }
-}
+            img_src = `./MATERIALS/LENS/${data[i]['name']}`
+            img_h = data[i]['height']
+            img_w = data[i]['width']
+            newHeight = img_h * (Client_Width / img_w) * 0.625
+            img_tag = data[i]['img-tag']
+
+            $('#area_lens_content').html(
+                $('#area_lens_content').html()
+                + '<div class="lens_content">'
+                + '<img src="' + img_src + '" alt="">'
+                + '<p class="img_tag">'
+                + '<span>' + img_tag[0] + '</span>&nbsp;'
+                + '<span>' + img_tag[1] + '</span>&nbsp;'
+                + '<span>' + img_tag[2] + '</span>&nbsp;'
+                + '</p></div>'
+            );
 
-// <p class="lens_content">1</p>
+            console.log($('.lens_content:eq(' + i + ') img').css('height'))
+
+            $('.lens_content:eq(' + i + ')').css("grid-row-end", `span ${Math.floor(newHeight) + 1}`);
+        }
+    });
+}
diff --git a/JSON/LAYOUT/lens_image.json b/JSON/LAYOUT/lens_image.json
@@ -0,0 +1,236 @@
+[
+    {
+        "name": "20240329_112209.avif",
+        "width": 4608,
+        "height": 3456,
+        "latitude": 116.075546265,
+        "longitude": 40.289943695,
+        "flash-mode": 0,
+        "focal-length": "163mm",
+        "camera-make": "HUAWEI",
+        "camera-model": "JAD-AL50",
+        "f-stop": "f/3.5",
+        "exposure-time": "1/1000 sec.",
+        "iso-speed": "ISO-50",
+        "exposure-step": "-1.3",
+        "date": "2024-03-29",
+        "time": "11:22:09",
+        "img-tag": ["Spring", "Huawei-P50Pro", "Beijing"]
+    },
+    {
+        "name": "20240329_115623.avif",
+        "width": 4608,
+        "height": 3456,
+        "latitude": 116.07555389333334,
+        "longitude": 40.289916991666665,
+        "flash-mode": 0,
+        "focal-length": "217mm",
+        "camera-make": "HUAWEI",
+        "camera-model": "JAD-AL50",
+        "f-stop": "f/3.5",
+        "exposure-time": "1/610 sec.",
+        "iso-speed": "ISO-50",
+        "exposure-step": "-1.1",
+        "date": "2024-03-29",
+        "time": "11:56:23",
+        "img-tag": ["Spring", "Train", "JuYongGuan"]
+    },
+    {
+        "name": "20240329_115636.avif",
+        "width": 4608,
+        "height": 3456,
+        "latitude": 116.07555389333334,
+        "longitude": 40.289916991666665,
+        "flash-mode": 0,
+        "focal-length": "217mm",
+        "camera-make": "HUAWEI",
+        "camera-model": "JAD-AL50",
+        "f-stop": "f/3.5",
+        "exposure-time": "1/800 sec.",
+        "iso-speed": "ISO-50",
+        "exposure-step": "-1.2",
+        "date": "2024-03-29",
+        "time": "11:56:36",
+        "img-tag": ["Spring", "Pink", "Beijing"]
+    },
+    {
+        "name": "20240329_135145.avif",
+        "width": 4608,
+        "height": 3456,
+        "latitude": 116.07559204166667,
+        "longitude": 40.290950775,
+        "flash-mode": 0,
+        "focal-length": "178mm",
+        "camera-make": "HUAWEI",
+        "camera-model": "JAD-AL50",
+        "f-stop": "f/3.5",
+        "exposure-time": "1/500 sec.",
+        "iso-speed": "ISO-50",
+        "exposure-step": "-1.6",
+        "date": "2024-03-29",
+        "time": "13:51:45",
+        "img-tag": ["Spring", "Train", "Beijing"]
+    },
+    {
+        "name": "20240329_135154.avif",
+        "width": 4608,
+        "height": 3456,
+        "latitude": 116.07559204166667,
+        "longitude": 40.290950775,
+        "flash-mode": 0,
+        "focal-length": "178mm",
+        "camera-make": "HUAWEI",
+        "camera-model": "JAD-AL50",
+        "f-stop": "f/3.5",
+        "exposure-time": "1/380 sec.",
+        "iso-speed": "ISO-50",
+        "exposure-step": "0.0",
+        "date": "2024-03-29",
+        "time": "13:51:54",
+        "img-tag": ["Spring", "Train", "Beijing"]
+    },
+    {
+        "name": "20240721_204044.avif",
+        "width": 2914,
+        "height": 3886,
+        "latitude": 118.15161132833333,
+        "longitude": 39.602874756666665,
+        "flash-mode": 0,
+        "focal-length": "270mm",
+        "camera-make": "HUAWEI",
+        "camera-model": "JAD-AL50",
+        "f-stop": "f/3.5",
+        "exposure-time": "1/60 sec.",
+        "iso-speed": "ISO-100",
+        "exposure-step": "0.0",
+        "date": "2024-07-21",
+        "time": "20:40:44",
+        "img-tag": ["Night", "Moon", "HeBei"]
+    },
+    {
+        "name": "20240721_205048.avif",
+        "width": 3160,
+        "height": 4214,
+        "latitude": 118.151786805,
+        "longitude": 39.603019715,
+        "flash-mode": 0,
+        "focal-length": "270mm",
+        "camera-make": "HUAWEI",
+        "camera-model": "JAD-AL50",
+        "f-stop": "f/3.5",
+        "exposure-time": "1/20 sec.",
+        "iso-speed": "ISO-2000",
+        "exposure-step": "0.0",
+        "date": "2024-07-21",
+        "time": "20:50:48",
+        "img-tag": ["Night", "Moon", "HeBei"]
+    },
+    {
+        "name": "20240721_205457.avif",
+        "width": 3456,
+        "height": 4608,
+        "latitude": 118.15187835666667,
+        "longitude": 39.6031456,
+        "flash-mode": 0,
+        "focal-length": "270mm",
+        "camera-make": "HUAWEI",
+        "camera-model": "JAD-AL50",
+        "f-stop": "f/3.5",
+        "exposure-time": "1/20 sec.",
+        "iso-speed": "ISO-2500",
+        "exposure-step": "0.0",
+        "date": "2024-07-21",
+        "time": "20:54:57",
+        "img-tag": ["Night", "Moon", "HeBei"]
+    },
+    {
+        "name": "20240721_210030.avif",
+        "width": 3456,
+        "height": 4608,
+        "latitude": 118.15184021,
+        "longitude": 39.60278320333333,
+        "flash-mode": 0,
+        "focal-length": "367mm",
+        "camera-make": "HUAWEI",
+        "camera-model": "JAD-AL50",
+        "f-stop": "f/3.5",
+        "exposure-time": "1/25 sec.",
+        "iso-speed": "ISO-1000",
+        "exposure-step": "0.0",
+        "date": "2024-07-21",
+        "time": "21:00:30",
+        "img-tag": ["Night", "Moon", "HeBei"]
+    },
+    {
+        "name": "20240721_210812.avif",
+        "width": 3456,
+        "height": 4608,
+        "latitude": 118.151275635,
+        "longitude": 39.60151290833333,
+        "flash-mode": 0,
+        "focal-length": "192mm",
+        "camera-make": "HUAWEI",
+        "camera-model": "JAD-AL50",
+        "f-stop": "f/3.5",
+        "exposure-time": "1/25 sec.",
+        "iso-speed": "ISO-1000",
+        "exposure-step": "0.0",
+        "date": "2024-07-21",
+        "time": "21:08:12",
+        "img-tag": ["Night", "Moon", "HeBei"]
+    },
+    {
+        "name": "20240611_194057.avif",
+        "width": 8964,
+        "height": 6723,
+        "latitude": 116.178710945,
+        "longitude": 39.729736333333335,
+        "flash-mode": 0,
+        "focal-length": "95mm",
+        "camera-make": "HUAWEI",
+        "camera-model": "JAD-AL50",
+        "f-stop": "f/3.5",
+        "exposure-time": "1/25 sec.",
+        "iso-speed": "ISO-1250",
+        "exposure-step": "-4.0",
+        "date": "2024-06-11",
+        "time": "19:40:57",
+        "img-tag": ["Moment", "Lightning", "Beijing"]
+    },
+    {
+        "name": "20240611_194237.avif",
+        "width": 6035,
+        "height": 8047,
+        "latitude": 116.178627,
+        "longitude": 39.72968291666667,
+        "flash-mode": 0,
+        "focal-length": "95mm",
+        "camera-make": "HUAWEI",
+        "camera-model": "JAD-AL50",
+        "f-stop": "f/3.5",
+        "exposure-time": "1/30 sec.",
+        "iso-speed": "ISO-1250",
+        "exposure-step": "-4.0",
+        "date": "2024-06-11",
+        "time": "19:42:37",
+        "img-tag": ["Moment", "Lightning", "Beijing"]
+    },
+    {
+        "name": "20240611_194336.avif",
+        "width": 6767,
+        "height": 9022,
+        "latitude": 116.17860413833333,
+        "longitude": 39.72976302833333,
+        "flash-mode": 0,
+        "focal-length": "95mm",
+        "camera-make": "HUAWEI",
+        "camera-model": "JAD-AL50",
+        "f-stop": "f/3.5",
+        "exposure-time": "1/25 sec.",
+        "iso-speed": "ISO-1250",
+        "exposure-step": "-4.0",
+        "date": "2024-06-11",
+        "time": "19:43:36",
+        "img-tag": ["Moment", "Lightning", "Beijing"]
+    }
+]
diff --git a/MATERIALS/LENS/20240329_112209.avif b/MATERIALS/LENS/20240329_112209.avif
diff --git a/MATERIALS/LENS/20240329_115623.avif b/MATERIALS/LENS/20240329_115623.avif
diff --git a/MATERIALS/LENS/20240329_115636.avif b/MATERIALS/LENS/20240329_115636.avif
diff --git a/MATERIALS/LENS/20240329_135145.avif b/MATERIALS/LENS/20240329_135145.avif
diff --git a/MATERIALS/LENS/20240329_135154.avif b/MATERIALS/LENS/20240329_135154.avif
diff --git a/MATERIALS/LENS/20240611_194057.avif b/MATERIALS/LENS/20240611_194057.avif
diff --git a/MATERIALS/LENS/20240611_194237.avif b/MATERIALS/LENS/20240611_194237.avif
diff --git a/MATERIALS/LENS/20240611_194336.avif b/MATERIALS/LENS/20240611_194336.avif
diff --git a/MATERIALS/LENS/20240721_204044.avif b/MATERIALS/LENS/20240721_204044.avif
diff --git a/MATERIALS/LENS/20240721_205048.avif b/MATERIALS/LENS/20240721_205048.avif
diff --git a/MATERIALS/LENS/20240721_205457.avif b/MATERIALS/LENS/20240721_205457.avif
diff --git a/MATERIALS/LENS/20240721_210030.avif b/MATERIALS/LENS/20240721_210030.avif
diff --git a/MATERIALS/LENS/20240721_210812.avif b/MATERIALS/LENS/20240721_210812.avif
Original file line number	Diff line number	Diff line change
Expand Up		@@ -19,4 +19,6 @@ function navigation_bar_onclick() {

		$('#main_content_table').css('margin-left', '-400%');
		});


		}