Build a comfortable and blazing fast image viewer in just 10 lines of Javascript code

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, 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

<!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

Blog

Build a comfortable and blazing fast image viewer in just 10 lines of Javascript code

Eckehard

Join Our Newsletter. No Spam, Only the good stuff.

Related