pkage/thumbnail_browser.html

## thumbnail_browser.html
<!DOCTYPE html>

<html>
    <head>
        <title>foo</title>
    </head>
    <body>
        <img id="big"/>
        <div id="thumbs"></div>

        <style>
            .thumb {
                width: 100px;
                height: 100px;

                /* so it's obviously clickable */
                cursor: pointer;
            }
            #big {
                width: 300px;
                height: 300px;
            }
            #thumbs {
                /* another option would be CSS grid */
                display: flex;
                flex-direction: row;
                align-items: flex-start;
                justify-content: flex-start;
                flex-wrap: wrap;
            }
        </style>

        <script>
            window.onload = async () => {
                // request your bundle of images
                let images = await fetch('url/to/your/json')

                // wait for the json to resolve
                images = await images.json()

                // save globally
                window.images = images

                // populate the image list
                const addImage = src => {
                    // helper to make an image element
                    let img = document.createElement('img')
                    img.setAttribute('src', 'data:image/png;base64,' + src)
                    img.classList.add('thumb')

                    // on click, set the big image to this one's source
                    img.addEventListener('click', () => {
                        document.querySelector('img#big')
                                .setAttribute('src', img.getAttribute('src'))
                    })

                    document.querySelector('#thumbs')
                        .appendChild(img)
                }

                // assuming it's an array, you may need to tweak this
                for (let image of images.list) {
                    addImage(image.src)
                }
            }
        </script>

        <!-- ayy -->
    </body>
</html>
	<!DOCTYPE html>

	<html>
	<head>
	<title>foo</title>
	</head>
	<body>
	<img id="big"/>
	<div id="thumbs"></div>

	<style>
	.thumb {
	width: 100px;
	height: 100px;

	/* so it's obviously clickable */
	cursor: pointer;
	}
	#big {
	width: 300px;
	height: 300px;
	}
	#thumbs {
	/* another option would be CSS grid */
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
	flex-wrap: wrap;
	}
	</style>

	<script>
	window.onload = async () => {
	// request your bundle of images
	let images = await fetch('url/to/your/json')

	// wait for the json to resolve
	images = await images.json()

	// save globally
	window.images = images

	// populate the image list
	const addImage = src => {
	// helper to make an image element
	let img = document.createElement('img')
	img.setAttribute('src', 'data:image/png;base64,' + src)
	img.classList.add('thumb')

	// on click, set the big image to this one's source
	img.addEventListener('click', () => {
	document.querySelector('img#big')
	.setAttribute('src', img.getAttribute('src'))
	})

	document.querySelector('#thumbs')
	.appendChild(img)
	}

	// assuming it's an array, you may need to tweak this
	for (let image of images.list) {
	addImage(image.src)
	}
	}
	</script>

	<!-- ayy -->
	</body>
	</html>