Blog Kaleidoscopic View Randomosity Tutorial
Yesterday’s Blog Kaleidoscopic View Primer Tutorial got us started down an image-led view of some aspects to the blog you are reading now. However, the “kaleidoscopic” aspects to its look and feel were lacking dynamism to my mind.
So today, we added the idea in the left hand cell of showing …
- up to 9 images at a time
- sequenced for display:block over the setTimeout period (currently hardcoded at 5 seconds)
This change involved encasing yesterday’s single image HTML within a new HTML div element representing the content of the table’s left hand cell, now ID‘ed and heightified as below …
<td id=myleft style='width:50%;height:150vh;'>
<div id=dmyimg><img id=myimg style='width:100%;' alt='RJMProgrammingImage' title='RJM Programming image' onclick='clickthis(this.src,this.title);' src=''></img></div>
</td>
… and the document.body onload (and its setTimeout continuously called) function starttheballrolling became responsive to a newly embedded HTML select element dropdown within the top h1 element as per …
<h1 id=myh1>Kaleidoscopic <a target=_blank title='RJM Programming Blog' href='//www.rjmprogramming.com.au/ITblog'>Blog</a> Image <select id=mysel onchange=num=eval(this.value);><option value=1></option><option value=2> x 2</option><option value=3> x 3</option><option value=4> x 4</option><option value=5> x 5</option><option value=6> x 6</option><option value=7> x 7</option><option value=8> x 8</option><option value=9> x 9</option></select> View</h1>
… in this (Javascript) way …
var num=1, xoff=-1, yoff=-1, woff=-1, hoff=-1;
function startballrolling() {
var minx=0, miny=0, axp=[], ayp=[], awp=[], ahp=[], aop=[], xp=-1, yp=-1, wp=-1, hp=-1, stsuff='', idsuff='';
if (xoff == -1 && yoff == -1) {
var rect=document.getElementById('myleft').getBoundingClientRect();
xoff=Math.floor(eval(('' + rect.left).replace('px','')));
yoff=Math.floor(eval(('' + rect.top).replace('px','')));
woff=eval(('' + window.innerWidth).replace('px','')); // eval(eval(('' + rect.width).replace('px','')));
woff/=2.1;
woff=Math.floor(eval('' + woff));
}
choiceis=huh(Math.floor(Math.random() * eval(-1 + imagelist.length)));
if (num > 1) {
var dinnards='', thistemplate='';
var templateimg="<img id=myimg style='width:100%;' alt='RJMProgrammingImage' title='RJM Programming image' onclick='clickthis(this.src,this.title);' src=''></img>";
for (var iij=0; iij<num; iij++) {
xp=Math.floor(Math.random() * 90);
xp/=100;
xp*=eval(('' + woff));
yp=Math.floor(eval(Math.floor(Math.random() * 600))); // + eval(('' + yoff)))); //90);
yp+=eval(('' + yoff));
op=eval(eval(Math.floor(Math.random() * 60) + 40) / 100.0);
wp=woff;
wp-=eval(('' + xoff));
hp=Math.floor(eval(100 - eval(('' + xp))));
xp+=eval(('' + xoff));
xp=Math.floor(xp);
if (iij == 0 || xp < minx) minx=xp;
if (iij == 0 || yp < miny) miny=yp;
axp.push(xp);
ayp.push(yp);
ahp.push(hp);
aop.push(op);
awp.push(wp);
}
for (var ij=0; ij<num; ij++) {
xp=axp[ij];
xp-=eval(('' + minx));
xp+=eval(('' + xoff));
yp=ayp[ij];
yp-=eval(('' + miny));
yp+=eval(('' + yoff));
op=aop[ij];
wp=awp[ij];
hp=ahp[ij];
thistemplate=templateimg.replace(" src=''", " src='" + imagelist[choiceis].split('#')[0].split('&')[0].split('?')[0] + "'");
thistemplate=thistemplate.replace("RJMProgrammingImage", imagelist[choiceis].split('#')[0].split('&')[0].split('?')[0]);
if (imagelist[choiceis].indexOf('#') != -1) {
thistemplate=thistemplate.replace('myimg', 'myimg' + idsuff).replace('width:100%;',stsuff + 'z-index:2' + ij + ';position:absolute;left:' + xp + 'px;top:' + yp + 'px;width:' + wp + 'px;opacity:' + op + ';');
thistemplate=thistemplate.replace("RJM Programming image", imagelist[choiceis].split('#')[1].replace(/\`/g,' '));
if (imagelist[choiceis].indexOf('?') == -1) thistemplate=thistemplate.replace(" style='", " style='1px solid orange;");
turl=imagelist[choiceis].split('#')[1].replace(/\`/g,' ');
} else {
thistemplate=thistemplate.replace('myimg', 'myimg' + idsuff).replace('width:100%;',stsuff + 'z-index:1' + ij + ';position:absolute;left:' + xp + 'px;top:' + yp + 'px;width:' + wp + 'px;opacity:' + op + ';');
if (1 == 2) turl='';
}
if (imagelist[choiceis].indexOf('?') != -1) {
curl=imagelist[choiceis].split('#')[0].split('?')[1].split('&')[0].replace('p=','');
thistemplate=thistemplate.replace(" style='", " style='22px solid green;");
} else if (1 == 2) {
curl='';
}
if (imagelist[choiceis].indexOf('&') != -1) {
wurl=imagelist[choiceis].split('#')[0].split('&')[1].split('#')[0].replace('w=','');
} else if (1 == 2) {
wurl='';
}
dinnards+=thistemplate;
idsuff='' + eval(2 + ij);
if (ij > 0) setTimeout(readforf, eval(Math.floor(eval((fivethousand * (1 + ij)) / eval(1 + num))) - 0));
stsuff='display:none;';
choiceis=huh(Math.floor(Math.random() * eval(-1 + imagelist.length)));
}
document.getElementById('dmyimg').innerHTML=dinnards;
setTimeout(startballrolling, fivethousand);
readyfor=2;
} else {
if (document.getElementById('myimg2')) document.getElementById('dmyimg').innerHTML="<img id=myimg style='width:100%;' alt='RJMProgrammingImage' title='RJM Programming image' onclick='clickthis(this.src,this.title);' src=''></img>";
document.getElementById('myimg').style.border='0px solid orange';
if (imagelist[choiceis].indexOf('#') != -1) {
document.getElementById('myimg').title=imagelist[choiceis].split('#')[1].replace(/\`/g,' ');
document.getElementById('myimg').style.border='1px solid orange';
turl=imagelist[choiceis].split('#')[1].replace(/\`/g,' ');
} else {
document.getElementById('myimg').title='RJM Programming image';
if (1 == 2) turl='';
}
if (imagelist[choiceis].indexOf('?') != -1) {
curl=imagelist[choiceis].split('#')[0].split('?')[1].split('&')[0].replace('p=','');
document.getElementById('myimg').style.border='12px solid green';
} else if (1 == 2) {
curl='';
}
if (imagelist[choiceis].indexOf('&') != -1) {
wurl=imagelist[choiceis].split('#')[0].split('&')[1].split('#')[0].replace('w=','');
} else if (1 == 2) {
wurl='';
}
document.getElementById('myimg').alt=imagelist[choiceis].split('#')[0].split('&')[0].split('?')[0];
document.getElementById('myimg').src=imagelist[choiceis].split('#')[0].split('&')[0].split('?')[0];
setTimeout(startballrolling, fivethousand);
}
}
Again, you can try the more dynamic live run and perhaps peruse its HTML and Javascript and CSS rjmgoogleimages.html code that changed in this way.
Previous relevant Blog Kaleidoscopic View Primer Tutorial is shown below.
Blog Kaleidoscopic View Primer Tutorial
We go to quite a bit of effort writing the wording of the blog posts, not to be noticed a great deal, but, the images we concoct perhaps grab more attention with the search engines. With this in mind, and because we have this imagining of a “kaleidoscope” of imagery related to this blog, mainly, we guess, we’ve put together an HTML and Javascript and CSS web application to show a changing slideshow getting towards a “kaleidoscopic” image view of this blog.
This web application’s innards, intrinsically very simple, consist, data wise, of one array of image URL members of the (syntax) form …
{absoluteImageURL}[?p={cutToTheChaseURL}&w={blogPostURL}#{blogPostTitleNoBlanks}]
Have you ever thought to use ? and & URL arguments (and # hashtag) on an image URL (in the web browser address bar, or programmatically)? We’ve done it before, and there is no trouble about this type of URL showing the image, plus there’s a good chance you’ll make sure caching does not get in the way of seeing that image as it really is then and there. Interesting, huh? Of course, we claim this erudite thought pattern, but our motivation, as ever, is to keep the data arrangements as simple as possible, the above “delimitation” inhouse rules ensuring we can stick with a one array (of single dimension) data arrangement with our work.
As you try the live run and perhaps peruse the HTML and Javascript and CSS rjmgoogleimages.html code, you can see that the bulk of the work is the compilation of this array. So how was it derived?
Via the View Page Source of the Google Advanced Option Image Search URL …
Thanks, Google, for that “view from above” perspective.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
