Update

SeeChen · Nov 4, 2024 · 62ee52e · 62ee52e
1 parent 2af70e9
commit 62ee52e
Show file tree

Hide file tree

Showing 6 changed files with 184 additions and 7 deletions.
diff --git a/CSS/travel/footprint_province.css b/CSS/travel/footprint_province.css
@@ -55,7 +55,7 @@
 
 #box_content_province .hexIn div {
     position: absolute;
-    background: #CCCCCCCC;
+    background: #FFFFFFCC;
     height: 100%;
     width: 100%;
     top: -100%;
@@ -70,6 +70,19 @@
     left: 0;
     right: 0;
     margin: auto;
+    font-family: 'aabairimengxiangjia';
+    color: #888;
+}
+
+#box_content_province .hexIn div p:nth-child(2) {
+    position: absolute;
+    width: 100%;
+    height: 25%;
+    bottom: 0em;
+    font-size: 1em;
+    line-height: 1em;
+    font-family: "aabairimengxiangjia";
+    color: #88888890;
 }
 
 #box_content_province li:nth-child(6n + 4) {

diff --git a/CSS/travel/footprint_show_img.css b/CSS/travel/footprint_show_img.css
@@ -0,0 +1,95 @@
+#show_img {
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 5em;
+    margin: auto;
+    z-index: 1000;
+    background: #d8dad7;
+    box-shadow: 5px -5px 5px #CCC;
+    opacity: 0;
+    transition: top 0.5s, opacity 0.2s;
+    pointer-events: none;
+    overflow-y: scroll;
+}
+
+#show_img::-webkit-scrollbar {
+    display: none;
+}
+
+#show_img > p:first-child {
+    background: #CCC;
+    color: #888;
+    font-size: 2em;
+    width: 1.5em;
+    height: 1.5em;
+    line-height: 1.5em;
+    text-align: center;
+    border-radius: 1em;
+    top: 0.25em;
+    left: 0.25em;
+    position: sticky;
+    box-shadow: 1px 1px 1px #888;
+    cursor: pointer;
+}
+
+#show_img > p:nth-child(2) {
+    position: absolute;
+    width: 100%;
+    font-size: 3em;
+    text-align: center;
+    pointer-events: none;
+    height: 1.5em;
+    line-height: 1.5em;
+    color: #888;
+    font-family: 'aabairimengxiangjia';
+    margin-top: -0.75em;
+}
+
+#show_img > p:nth-child(3) {
+    font-size: 1em;
+    margin-top: 3em;
+    text-align: center;
+    font-family: 'GenJyuuGothic-Normal';
+    color: #888;
+}
+
+#show_img > img:nth-child(4) {
+    display: block;
+    height: 95vh;
+    width: auto;
+    max-width: 90vw;
+    margin: auto;
+    margin-top: 1em;
+}
+
+#show_img > p:nth-child(5) {
+    width: 80%;
+    margin: auto;
+    padding: 1em;
+    font-size: 1em;
+    color: #888;
+    font-family: 'GenJyuuGothic-Normal';
+}
+
+#show_img > p:nth-child(5) span {
+    padding: 0 0.5em;
+    border-radius: 1em;
+    border: 0.15em solid #888;
+    margin: 0.1em 0.1em;
+    cursor: pointer;
+    display: inline-table;
+}
+
+#show_img > p:nth-child(6) {
+    width: 80%;
+    margin: auto;
+    font-family: 'aabairimengxiangjia';
+    font-size: 1.5em;
+    color: #888;
+    border-top: 0.1em solid #888;
+    padding-top: 0.5em;
+    margin-bottom: 2em;
+}
diff --git a/JS/TRAVEL/index.js b/JS/TRAVEL/index.js
@@ -50,12 +50,65 @@ window.onload = function() {
 
         $('#my_travel_story').css('top', '100vh');
     })
+
+    img_show_close_btn();
 }
 
 function img_click(obj) {
 
-    console.log(obj);
-    console.log(JSON.parse(obj.getAttribute('img_data')));
+    let img_data = JSON.parse(obj.getAttribute('img_data'));
+    $('#show_img > p:nth-child(2)').text(img_data['title']);
+    $.getJSON('/JSON/LANGUAGE/travel_national.json').then(
+        countryName => {
+
+            return $.getJSON(`/JSON/LANGUAGE/Country/travel_national_${img_data['country']}.json`).then(provinceName => {
+                return { countryName, provinceName };
+            });
+        }).then(({countryName, provinceName}) => {
+
+            let img_location = '';
+            let current_lang = language.getLanguage();
+            if (current_lang === 'zh') {
+
+                img_location = `${countryName['zh'][0][img_data['country']]}${provinceName['zh'][0][img_data['province']]}${img_data['city']}.`;
+            } else {
+
+                img_location = `${img_data['city']}, ${provinceName[current_lang][0][img_data['province']]}, ${countryName[current_lang][0][img_data['country']]}.`;
+            }
+
+            $('#show_img > p:nth-child(3)').text(img_location);
+        });
+
+    $('#show_img > img:nth-child(4)').attr('src', img_data['url'])
+
+    let img_labels = img_data['label'];
+    let img_label_html = '';
+    img_labels.forEach(function(img_label) {
+
+        img_label_html += `<span label_id="${img_label}">${img_label}</span>`;
+    });
+    $('#show_img > p:nth-child(5)').html(img_label_html);
+    $('#show_img > p:nth-child(6)').text(img_data['desc']);
+
+    $('#show_img').css({
+        'top': 0,
+        'opacity': 1,
+        'pointer-events': 'auto'
+    });
+}
+
+function img_show_close_btn() {
+
+    $('#show_img p').click(function() {
+
+        $('#show_img').scrollTop(0);
+
+        $('#show_img').css({
+            'top': '5em',
+            'opacity': 0,
+            'pointer-events': 'none'
+        });
+    });
 }
 
 function travelStoryScroll() {
@@ -348,7 +401,11 @@ function worldMapsAction() {
                                 background-size: cover;
                                 background-position: center;
                                 background-repeat: no-repeat;
-                            ">
+                            "
+                            img_data="
+                                ${JSON.stringify(img_gallery[_i]).replace(/"/g,'&quot;')}
+                            "
+                            >
                                 <div>
                                     <p>${img_gallery[_i]['title']}</p>
                                     <p>${img_gallery[_i]['city']}, ${provinceName[language.getLanguage()][0][img_gallery[_i]['province']]}, ${countryName[language.getLanguage()][0][img_gallery[_i]['country']]}.</p>

diff --git a/JS/TRAVEL/national.js b/JS/TRAVEL/national.js
@@ -126,6 +126,7 @@ export function nationalMapsAction(country_object) {
                             >
                                 <div>
                                     <p>${img_gallery[_i]['title']}</p>
+                                    <p>CITY</p>
                                 </div>
                             </span>
                         </span>

diff --git a/JSON/LAYOUT/travel_gallery.json b/JSON/LAYOUT/travel_gallery.json
@@ -3,9 +3,9 @@
     "country": "CN",
     "province": "YunNan",
     "city": "EShan",
-    "title": "0",
-    "desc": "00",
-    "label": []
+    "title": "峨山彝族自治县",
+    "desc": "中国第一个彝族自治区",
+    "label": ["label1", "label2", "label3", "label4", "label5"]
 }, {
     "url": "/MATERIALS/travel_story/china/0.avif",
     "country": "CN",

diff --git a/Travel/index.html b/Travel/index.html
@@ -16,6 +16,7 @@
         <link rel = "stylesheet" href="../CSS/travel/foot_print_world.css" type="text/css">
         <link rel = "stylesheet" href="../CSS/travel/footprint_country.css" type="text/css">
         <link rel = "stylesheet" href="../CSS/travel/footprint_province.css" type="text/css">
+        <link rel = "stylesheet" href="../CSS/travel/footprint_show_img.css" type="text/css">
 
         <script src="/JS/TRAVEL/footprint_world.js" type="text/javascript"></script>
 
@@ -242,5 +243,15 @@ <h1>您好！</h1>
                 <ul></ul>
             </div>
         </div>
+
+        <div id="show_img">
+
+            <p>🗙</p>
+            <p></p>
+            <p></p>
+            <img>
+            <p></p>
+            <p></p>
+        </div>
     </body>
 </html>
-Original file line number
+Diff line change
@@ Expand Up / @@ -126,6 +126,7 @@ export function nationalMapsAction(country_object) { @@
                                 >
                                     <div>
                                         <p>${img_gallery[_i]['title']}</p>
+                                        <p>CITY</p>
                                     </div>
                                 </span>
                             </span>
@@ Expand Down @@