Tabular Single Row Image Gallery Primer Tutorial
“Tabular Single Row Image Gallery” …
Smabular Single Row Image Gallery
… we’re sure is the reaction of some readers out there, to today’s “starting draft” for an idea we had. Today’s part of the jigsaw we want to explore may be “ho hum” and “so non-mobile”, but we’re hoping the thread appeals to more modern ideas as we go along.
So much for the apologies, and so let’s now look at the basis to this start …
- media (so far just image) …
- gallery … presented in …
- table … HTML element … in …
- single tr row
- deliberately overflowing to the right of the screen view of the webpage … and so …
- scrollable (ie. window scrollable) to … those right hand parts …
- only “media loaded” …
- as “scrolled to” or “stumbled upon”
So far the window scrollable detection goes (thanks to this useful link) …
window.onscroll = function (e) {
// called when the window is scrolled.
vspos4=document.body.scrollTop;
vspos3=document.body.scrollLeft;
var vstdn=Math.ceil(eval('' + vspos3) / eval('' + amin));
if (curtdn != vstdn) {
checkthen(vstdn);
}
}
… and the CSS produced “wording (ie. non-media) content” is produced down the bottom left of “inhouse WordPress Blog image cell background” ( possible because of background-size:contain ) we think is interesting …
<style>
td {
border: 1px dotted green;
}
.inhouse {
vertical-align: bottom;
padding-bottom: 20px;
}
.inhouse::after {
content: 'Media Gallery \a RJM Programming \a August, 2025 \a Thanks to Lorem Picsum at https://picsum.photos/ \a ' attr(alt);
white-space: pre-wrap;
}
</style>
… in a “first draft” Tabular Single Row Image Gallery web application for your perusal. Thanks to Lorem Picsum regarding, as so often happens for us, when we’d like beautiful random images to be involved with web applications!
If this was interesting you may be interested in this too.
