lee
/
leemorgan-dev


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
							<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Lee Morgan</title>
        <link rel="stylesheet" href="/travel/style">
    </head>
    <body>
        <h1 id="title"></h1>

        <div id="images"></div>

        <div id="fullPage" style="display:none"></div>

        <script>
            let fullPage = document.getElementById("fullPage");
            let path = window.location.pathname
                .split("/")
                .slice(2)
                .join("/");

            fetch(`/travel/images/${path}`)
                .then(response => response.json())
                .then((response)=>{
                    let container = document.getElementById("images");

                    for(let i = 0; i < response.length; i++){
                        let img = document.createElement("img");
                        img.src = response[i];
                        img.alt = "A picture";
                        img.onclick = ()=>{
                            let newImg = img.cloneNode(true);
                            fullPage.appendChild(newImg);
                            fullPage.style.display = "flex";
                            newImg.onclick = ()=>{event.stopPropagation()}
                        };
                        container.appendChild(img);
                    }
                })
                .catch(err => {});

            let newPath = path.split("/");
            let title = "";

            for(let i = newPath.length - 1; i >= 0; i--){
                title += `${newPath[i].replaceAll("-", " ")}, `;
            }

            document.getElementById("title").innerText = title.substring(0, title.length-2);
            
            document.getElementById("fullPage").onclick = ()=>{
                fullPage.removeChild(document.querySelector("#fullPage img"));
                fullPage.style.display = "none";
            }
        </script>
    </body>
</html>