A lot of photo gallery apps have a way to click on a small version of a picture and show an enlarged version. The small version is called a "thumbnail" (because it's the size of a ...).
Because the feature is done with hyperlinks, the Ottergram authors decided to call them thumblinks.
When we first start coding HTML and CSS, we think in terms of what we can see: text, images, colors, etc. But if we want to work with a web page dynamically, we have to think of it as a data structure. In fact, a modifiable data structure.
The DOM is a tree representation of the structure and content of the web page, accessible from JavaScript.
Each element of the tree corresponds to a structural part of the web page: a paragraph, a list item, an image, a DIV, etc.
HTML elements have lots of attributes, like SRC, HREF, ID, CLASS, ...
The complete list is defined by the W3C (World Wide Web Consortium) and every once in a while, they add new attributes.
But they promise never to use any attributes starting
with DATA-
, thereby reserving them for
programmers like us.
Meaning reading and modifying attributes? Sure.
We stored some useful information on each of the thumbnails,
saying what image to show in the detail size and what text to put
overlapping the detail image. We stored these
in attributes,
namely data-image-title
, data-image-url
and data-image-title
.
Our event handler will read off these values and modify
the SRC
attribute of the detail image and
the text
of the detail figcaption.
The default behavior of clicking on a hyperlink is to replace the current page with the page designated by the HREF.
In this case, we *don't* want the browser to replace this page with the detail image. We want to *stay* on the page with the thumbnails and such.
So what are we getting by using the A
tag? We are
getting clickability in an accessible way. This is
not obvious, so I'm glad you asked.
For sure. I've already done so, but I can review if you want.
Glad to hear it!