diff --git a/CSS/travel/footprint_province.css b/CSS/travel/footprint_province.css index 8a23e2b..2e1f116 100644 --- 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 new file mode 100644 index 0000000..6695e55 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/JS/TRAVEL/index.js b/JS/TRAVEL/index.js index cc60c14..9f908d0 100644 --- 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 += `${img_label}`; + }); + $('#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,'"')} + " + >

${img_gallery[_i]['title']}

${img_gallery[_i]['city']}, ${provinceName[language.getLanguage()][0][img_gallery[_i]['province']]}, ${countryName[language.getLanguage()][0][img_gallery[_i]['country']]}.

diff --git a/JS/TRAVEL/national.js b/JS/TRAVEL/national.js index 6fcf1d5..b48f193 100644 --- a/JS/TRAVEL/national.js +++ b/JS/TRAVEL/national.js @@ -126,6 +126,7 @@ export function nationalMapsAction(country_object) { >

${img_gallery[_i]['title']}

+

CITY

diff --git a/JSON/LAYOUT/travel_gallery.json b/JSON/LAYOUT/travel_gallery.json index b2569c7..88ce4cf 100644 --- 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 index c6f20da..620956d 100644 --- a/Travel/index.html +++ b/Travel/index.html @@ -16,6 +16,7 @@ + @@ -242,5 +243,15 @@

您好！

+ +
+ +

🗙

+

+

+ +

+

+
\ No newline at end of file