Posted on Nov 1, 2023

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 } })()