Image Article

An Article Containing an Image in a Link

We will create an Article node and load it with an image link. When we say image link here we are referring to an image node wrapped in an anchor link that links to that same image.

Clickable Links UX Best Practice

Images wrapped in links are old news. It was very common, ubiqutous, many years ago when the internet cabling around the world was still in it's inphant age. Back then images were slow to load so we would load a low resolution image and wrap it in a link to a high resolution version of that same image. The high resolution image would load quickly. If you were willing to wait for the high resolution version you could click on it and wait. It was an important feature for offering a speedy page load time. It was a best practice must have and do.

Image links Feature

Clickable image links are a feature offered by wrapping an image in a link another or same image. We can right click and open an image in a new tab to look at that image in a page by itself. Clickable links offer a click short cut to that feature.

Mission

The home page here at 3deem.com is going to showcase a sample rending by our WebGL 3D CAD/CGI app. It is the most valuable app on our roster. I want to be able to click on the image rendering and look at it in it's own page. I will wrap it in an image link href'ing that same image.

Image Article Function

We added a image article function to our app's cms body object. The article contains a clickable image linked to the same image.

cms.body.imageArticle()

appAx00By01Cz02.cms.body.js

imageArticle() src code screenshot

source code of imageArticle function

Image Link DOM Create Function

We added an anchor containing an img dom create method.

imageLink()

appAx00By01Cz02.cr.js

imageLink() src code screenshot

source code of imageLink function

Content Data[]

We image src urls to our data file.

dataContent[]

appAx00By01Cz02.dataContent.js

dataContent[] json screenshot

source code of dataContent json

All files

And here are all the files

appAx00By01Cz02.js

appAx00By01Cz02.cr.js

appAx00By01Cz02.nd.js

appAx00By01Cz02.dataContent.js

appAx00By01Cz02.cms.head.js

appAx00By01Cz02.cms.body.js

appAx00By01Cz02.start.js

Demo page

App appAx00By01Cz02.js .

demo