DEV Community

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

Posted on

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

Here is a working Demo

Top comments (6)

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
 
mikki profile image
natiol999 •

Hello. This is certainly interesting, but what do you know about Facebook algorithms? Thanks to gyre.pro/blog/what-we-know-about-f... this article, I was now able to fully understand this and publish content that is interesting to the viewer. And now I can earn real money.

Collapse
 
artydev profile image
artydev •

Very nice, thank you Eckehard.

Read next

andreas_herz profile image

Exploring the Exciting New Features in Node.js 22

Andreas Herz -

punk-sama profile image

Axios šŸ‘¾

Gustavo H. J. -

nicm42 profile image

Earth Day Celebration Landing Page

Nic -

shekhartarare profile image

How to Print to Browser Console from Razor View Page in ASP.NET MVC

Shekhar Tarare -