DEV Community

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

Posted on

9 1 1 1 1

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>
Enter fullscreen mode Exit fullscreen mode

Here is a working Demo

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (5)

Collapse
 
efpage profile image
Eckehard • 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())
Enter fullscreen mode Exit fullscreen mode

Here is the working DEMO

Collapse
 
artydev profile image
artydev • 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
  }
})()
Enter fullscreen mode Exit fullscreen mode

Demo

Collapse
 
efpage profile image
Eckehard

Thank you for rewriting the app in a more organized way.

It would be nice to see the implementation in VanJS, as this might shorten the code a bit.

Collapse
 
artydev profile image
artydev

Thanks to you.
It should be shorter, but I prefer the 'dml' way :-)

Collapse
 
artydev profile image
artydev

Very nice, thank you Eckehard.

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more