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

#html #javascript #performance #tutorial

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

Top comments (5)

Eckehard • Nov 2 '23 • Edited

This is the same code rewritten in VanJS. VanJS provides state binding, so in theory code should be shorter. Bottomline, differences are small:

page composition is a bit more verbose
state binding allows better code separation

Finally, it is a matter of taste which approach you prefer...

const { h3, div, slider, img, br, a, input, span } = van.tags
const cnt = 12, src = "https://ultimatemotorcycling.com/wp-content/uploads/2017/08/2018-Harley-Davidson-Low-Rider-Review-Softail-Motorcycle-"
const viewer = () => {
    let size = van.state(80)
    const dom = div(
        h3("Image-Viewer"),
        input({ type: "range", min: 80, max: screen.width, value: size, oninput: e => size.val = e.target.value }),
        br()
    )
    for (let i = 1; i < cnt + 1; i++) {
        let s = src + i + ".jpg"
        dom.appendChild(
            a({ "target": "_blank", title: "Click to show image", href: s },
                img({ "src": s, "alt": s, style: () => `width: ${size.val}px; height: ${size.val}px;` })))
    }
    return dom
}
van.add(document.body, viewer())

Here is the working DEMO

artydev • Nov 1 '23 • Edited

If I had to incorporate it in a lib , I perhaps would write like

const ImageViewer = (function () {

  const range = (start, end) => Array.from('_'.repeat(end - start + 1), (_ ,i) => start + i);
  const getElm = (id) => document.getElementById(id)

  const cnt = 12,
        src = "https://ultimatemotorcycling.com/wp-content/uploads/2017/08/2018-Harley-Davidson-Low-Rider-Review-Softail-Motorcycle-"

  let i = 0, 
      img = [], 
      lnk = [], 
      s = "";

  const 
    target = "_blank", 
    title = "Click to show image", 
    value = 150,
    baseattrib = "display:block;";
    rangeimg = range(1,12);
    begin = selectBase;
    end = unselectBase;

  h3("Image viewer example")

  function Slider () {
    let sl = slider({ min:80, max:screen.width, value, baseattrib}); br();
    sl.oninput = () => { 
      rangeimg.map(v => img[v].style.height = img[v].style.width = sl.value + "px" )
    }
    return sl;
  }

  const start =  (parent) => {
      begin(getElm(parent))
        let sl = Slider();
        rangeimg.map((val) => {
          s = src + `${val}.jpg`
          begin(link("", s, {target,title}))
            img[val] = image(s, `width:${sl.value}px;height:${sl.value}px;`)
          end();
        })
      end();
  }

  return {
    start
  }
})()