Build a comfortable and blazing fast image viewer in just 10 lines of Javascript code
Tags: html, javascript, performance, tutorial
Published: 2023-11-01 20:30:37

Modern Browsers provide an awful lot of power to build dynamic websites. And they do a lot to provide a smooth user experience, so we need only a minimal effort to build great applications. 

Here is an example of what you can do with minimal effort. I´m using the [DML-library](https://dml.efpage.de/DML_homepage/), which allows to build applications using a minimal overhead. With just 10 lines of Javascript-code (and a minimum of CSS) you can build a blazing fast Image browser, that is really handy to use. Copy the code below to a textfile and call it `image-viewer.html` to get a working application. 
*Hint: This demo shows images from ultimatemotorcycling.com*
```HTML
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>TestApp</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/gh/efpage/DML/lib/DML.js"> </script>
    <style>
        img {
            width: 100px;
            height: 100px;
            margin: 2px;
            object-fit: cover;
            object-position: 50% 50%;
        }
    </style>
</head>

<body>
    <script>
        const cnt = 12, src = "https://ultimatemotorcycling.com/wp-content/uploads/2017/08/2018-Harley-Davidson-Low-Rider-Review-Softail-Motorcycle-"
        let img = []

        h3("Image viewer example")
        let sl = slider({ min: 80, max: screen.width, value: 150, baseattrib: "display: block;"}); br();
        sl.oninput = () => { for (i = 1; i < cnt + 1; i++) img[i].style.height = img[i].style.width = sl.value + "px" }

        for (let i = 1; i < cnt + 1; i++) {
            let s = src + i + ".jpg"
            selectBase(link("", s, { "target": "_blank", title: "Click to show image"}))
            img[i] = image(s, "width: " + sl.value + "px; height: " + sl.value + "px; ")
            unselectBase()
        }

    </script>
</body>

</html>
```
Here is a working [Demo](https://flems.io/#0=N4IgZglgNgpgziAXAbVAOwIYFsZJAOgAsAXLKEAGhAGMB7NYmBvAHkJgwBMA+AHTQAEAljmIYB1QhgBOcGMQC8vEAFdiYALQAOZX0HDiEYrG4BJLBgDmMAQDUIMAO4xpLAPSHjMPUJHzxmDhKIABuDo4ADrTSxMoS9IwMwY4QnMSECpwwYdQwGilphBQCEGhGEBhQGnDUlTAKAIz4AAy6-L410hARxAJw0tTBJMQRcIhubtScaPgAVnBZUBAh0vho8m6WhG4wYBFWMG4AIgCyADJuSwBGx+caWKVzcLrund3Eeu7sXHqUIHKwaiGegIRAgABMiAaAFYQABfCjobC4MFPP50BhMYh4IS43EYuC9agMAQKAQNcHFfrUUkCZTDUbjNwqKCGCyMLC0YjRagAT2oSzQlnwdCwbkiGgxiWIzIiUFoXDgbnBzQaAHY3M0tMrVVoNAAJGSwXkaI4YMKcOD0DRnWiODQAJVSLkd2XCGgAyrQwGJoBoTlyefzYBplO08bjYL0IMUIFhLLTkABdYpQNAAa0TKb6-HDEYEhAAzAAKZTmA4CMJOFwCGAAD2wcpgygAlHmI1G+lBaXAlllpMXgAIHmhEAItM1ihY62POjAmPgCuliiFKioYGOYZOBFcMHIMMRiF0rmPlJwIHA5RheWOrvLqOmANzKOEtx87gdv9t43v4eilCI1FpYsW1JbgBCHMBogEYsIFpBp3zglgJBJABqclENQ1DQLjSxkAgJN8EJXlYCIGAIC2XoyVw-DCOI0il0IHsoHwVcoHXAR0OUCI6ziOFc30fMoOkGC4LJBCSmEFDenQiSICw0DgG-fM+h7AZOMkriCFmCJLDDQSVKEAEYCBAAhPcYGLQV01LEBlCpYoh2UMRpGsWIkDpEAAH07wwDN7IETxYFPEAAGElgfQLaD6Qg7RKCxrBfFs2wMwyaII2k4wOYs4GKZRGJCjTfzYjitJ4992AokhCvQ4q1xsMq63fVtlPzFQ0GMsyLJA1qBH4tA-k64EOrwBpC0QZp4UREBAhRAhqDgBAqClLEcRU3CIN6vECvJZpmnKrbcUqyjNz2g7UpUixXNKMdwXOwy8VoK5ZhM4gNEgYgxzoEIXGfC78yel6gQ0KI4HKegx2hZoAFIBCh6G-sM-rBpgQFhtBEA1Qm+EkzhIA)