lee
/
leemorgan-dev


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

        <div id="tags"></div>

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

        <div id="fullPage" style="display:none">
            <svg id="closeImg" width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
                <line x1="18" y1="6" x2="6" y2="18"></line>
                <line x1="6" y1="6" x2="18" y2="18"></line>
            </svg>

            <svg id="nextImg" width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
                <line x1="5" y1="12" x2="19" y2="12"></line>
                <polyline points="12 5 19 12 12 19"></polyline>
            </svg>

            <svg id="previousImg" width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
                <line x1="19" y1="12" x2="5" y2="12"></line>
                <polyline points="12 19 5 12 12 5"></polyline>
            </svg>
        </div>

        <script>
            let id = window.location.pathname.split("/");
            id = id[id.length-1];
            window.imageIndex = 0;
            let fullPage = document.getElementById("fullPage");
            let container = document.getElementById("images");

            fetch(`/gallery/json/${id}`)
                .then(response => response.json())
                .then((response)=>{
                    document.getElementById("title").innerText = response.title;
                    let tags = document.getElementById("tags");

                    for(let i = 0; i < response.tags.length; i++){
                        let tag = document.createElement("p");
                        tag.innerText = response.tags[i];
                        tag.classList.add("tag");
                        tags.appendChild(tag);
                    }

                    for(let i = 0; i < response.images.length; i++){
                        let img = document.createElement("img");
                        img.src = response.images[i];
                        img.alt = "Missing image";
                        img.onclick = ()=>{
                            imageIndex = i;

                            let newImg = img.cloneNode(true);
                            fullPage.appendChild(newImg);
                            fullPage.style.display = "flex";
                            newImg.onclick = ()=>{event.stopPropagation()};
                        }
                        container.appendChild(img);
                    }
                })
                .catch((err)=>{});

            document.getElementById("fullPage").onclick = ()=>{
                fullPage.removeChild(document.querySelector("#fullPage img"));
                fullPage.style.display = "none";
            };

            document.getElementById("nextImg").onclick = ()=>{
                event.stopPropagation();
                if(imageIndex >= container.children.length - 1) return;
                imageIndex++;
                let newImg = container.children[imageIndex].cloneNode(true);
                newImg.onclick = ()=>{event.stopPropagation()};

                fullPage.removeChild(document.querySelector("#fullPage img"));
                fullPage.appendChild(newImg);
            }

            document.getElementById("previousImg").onclick = ()=>{
                event.stopPropagation();
                if(imageIndex <= 0) return;
                imageIndex--;
                let newImg = container.children[imageIndex].cloneNode(true);
                newImg.onclick = ()=>{event.stopPropagation()};

                fullPage.removeChild(document.querySelector("#fullPage img"));
                fullPage.appendChild(newImg);
            }
        </script>
    </body>
</html>