Tabular Single Row Image Gallery Linking Tutorial

Posted on by
Tabular Single Row Image Gallery Linking Tutorial

Tabular Single Row Image Gallery Linking Tutorial

We do not expect many readers to have thought yesterday’s YouTube Audio Only Mobile Looping Tutorial that little bit different. It was long in the making, and difficult (at least for us), but a brief tutorial. Too brief for interested parties, and we intended it as a seminal discussion, but it’s meaning got subsumed, if you will, with the goings on of the blog posting thread last talked about with the day before’s Tabular Single Row Image Gallery Linking Tutorial.

You see, the YouTube audio stream only inhouse looping control is an essential thing we needed to tie down for today’s progress in this blog posting thread, that being the first incarnation of …

Radio Play

… sequenced modes of play we’re offering today, as a start, for …

  • non-mobile users
  • using audio stream only button option clicks

So what was (most) …

difficult (at least for us)

… about getting this first Radio Play idea happening? In a word …

Focus

You find yourself wanting to do lots of …


[element].click();

… and …


[element].blur();

… types of work, which work best with focus (and boy, did we need to “focus”?!) We’ve minimised this where we could, but what we highly recommend users of this functionality doing is …

  • be presented with the solo web browser full screen (initial) window with the radio emoji
  • click desired first song link when the song link emojis appear … then …
  • it’s best to make this window small and away from other web browser windows but not overlapping for the best chance of …
  • songs play in sequence and loop back through the list

… within changed swipe_media.html Tabular Single Row Media Gallery.

Previous relevant Tabular Single Row Image Gallery Linking Tutorial is shown below.

Tabular Single Row Image Gallery Linking Tutorial

Tabular Single Row Image Gallery Linking Tutorial

After yesterday’s Tabular Single Row YouTube Audio or Video Buttons Tutorial work mainly regarding audio and video media, today we return to those …

  • background WordPress Blog random tutorial images … and link them via a modified 404.php creator’s …
    <?php

    if (strpos(('?' . $_SERVER['QUERY_STRING']), '?rand=') !== false) {
    $huht=@file_get_contents('http://www.rjmprogramming.com.au/HTMLCSS/select_palette.php?putrandom=' . urlencode('?rand=' . $_GET['rand'] . '.' . $pnumis . $ptitle));
    }

    ?>
    … calling on …
  • a modified select_palette.php helper …
    <?php

    if (isset($_GET['putrandom'])) {
    $contis=str_replace(' ','++',str_replace('+',' ',urldecode($_GET['putrandom']))) . "\n";
    $xcurgmt=gmdate("Ymd");
    if (!file_exists($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . 'media_gallery_swipe_' . $xcurgmt . '.htm')) {
    foreach (glob($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . 'media_gallery_swipe_' . '*.htm') as $dfilename) {
    unlink($dfilename);
    }
    file_put_contents($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . 'media_gallery_swipe_' . $xcurgmt . '.htm', $contis);
    } else {
    file_put_contents($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . 'media_gallery_swipe_' . $xcurgmt . '.htm', file_get_contents($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . 'media_gallery_swipe_' . $xcurgmt . '.htm') . $contis);
    }
    exit;
    } else if (isset($_GET['getrandom'])) {
    $xcurgmt=gmdate("Ymd");
    $imode=0;
    $contis="";
    $idp="";
    $jdp="";
    $pfix="";
    $sfix="";
    if (file_exists($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . 'media_gallery_swipe_' . $xcurgmt . '.htm')) {
    $contis=file_get_contents($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . 'media_gallery_swipe_' . $xcurgmt . '.htm');
    if (strlen($_GET['getrandom']) > 0) {
    $relstuffs=explode(str_replace(' ','++',str_replace('+',' ',strtolower(urldecode($_GET['getrandom'])))) . '.', $contis);
    if (sizeof($relstuffs) > 1) {
    $isub=0;
    $jdp=str_replace('rand=','',str_replace(' ','++',str_replace('+',' ',strtolower(urldecode($_GET['getrandom'])))));
    $imode=1;
    while (substr(substr($relstuffs[-1 + sizeof($relstuffs)],$isub),0,1) >= '0' && substr(substr($relstuffs[-1 + sizeof($relstuffs)],$isub),0,1) <= '9') {
    if ($imode == 0) {
    $jdp.=substr(substr($relstuffs[-1 + sizeof($relstuffs)],$isub),0,1);
    } else {
    $idp.=substr(substr($relstuffs[-1 + sizeof($relstuffs)],$isub),0,1);
    }
    $isub++;
    if (substr(substr($relstuffs[-1 + sizeof($relstuffs)],$isub),0,1) == '.') {
    $imode=1;
    $isub++;
    }
    }
    if (isset($_GET['via'])) {
    $pfix=" if (parent.document.getElementById('" . $_GET['via'] . "')) { parent.document.getElementById('" . $_GET['via'] . "').style.width='100%;'; parent.document.getElementById('" . $_GET['via'] . "').innerHTML+='<iframe style=width:100%;height:800px; src=!!!></iframe>'; } else { ";
    $sfix=" } ";
    }
    if (strtolower(urldecode($_GET['getrandom'])) != urldecode($_GET['getrandom'])) { // Cut to the Chase
    echo "<html><body onload=\"" . str_replace('!!!','/slideshow.html?title=' . explode(" (", explode("\n", explode('=' . $jdp . '.' . $idp, $contis)[1])[0])[0],$pfix) . " parent.window.open('/slideshow.html?title=" . explode(" (", explode("\n", explode('=' . $jdp . '.' . $idp, $contis)[1])[0])[0] . " " . $sfix . " ','_blank','top=200,left=200,width=600,height=600');\"></body></html>";
    exit;
    } else { // WordPress Blog Posting
    echo "<html><body onload=\"" . str_replace('!!!','/ITblog/?p=' . $idp . '#content',$pfix) . " parent.window.open('/ITblog/?p=" . $idp . "#content','_blank','top=200,left=200,width=600,height=600'); " . $sfix . " \"></body></html>";
    exit;
    }
    }
    }
    }
    echo "<html><body><pre>" . $contis . '</pre></body></html>';
    exit;
    }

    ?>
    … called at the parent window by …
  • changed swipe_media.html Tabular Single Row Media Gallery …

    function checkmeout(evt, iscuttothechase) {
    if (evt.target.outerHTML.split('>')[0].indexOf('url(') != -1) {
    if (evt.target.outerHTML.split('>')[0].split('url(')[1].split(')')[0].indexOf('?rand=') != -1) {
    if (iscuttothechase) {
    document.getElementById('sparepal').src='/HTMLCSS/select_palette.php?getrandom=' + encodeURIComponent('RAND=' + evt.target.outerHTML.split('>')[0].split('url(')[1].split(')')[0].split('?rand=')[1].split("'")[0].split('"')[0].split(')')[0].split('"')[0]); // + ('&viJUNKa=' + evt.target.id).replace('td','div')
    } else {
    document.getElementById('sparepal').src='/HTMLCSS/select_palette.php?getrandom=' + encodeURIComponent('rand=' + evt.target.outerHTML.split('>')[0].split('url(')[1].split(')')[0].split('?rand=')[1].split("'")[0].split('"')[0].split(')')[0].split('"')[0]); // + ('&viJUNKa=' + evt.target.id).replace('td','div')
    }
    }
    }
    }

… web application, now accepting …

  1. click on one of these WordPress Blog random tutorial images to open window to relevant WordPress Blog posting … or …
  2. right click on one of these WordPress Blog random tutorial images to open window to relevant Cut to the Chase web application or presentation media regarding that blog posting above

Previous relevant Tabular Single Row YouTube Audio or Video Gallery Tutorial is shown below.

Tabular Single Row YouTube Audio or Video Gallery Tutorial

Tabular Single Row YouTube Audio or Video Gallery Tutorial

Today we’ve connected …

… which now have three new functionality options …

  • <–> … link to align the (previously) “Brady Bunch” YouTube iframes into a single row in the same web browser tab
  • <–>A+V … call of yesterday’s Media Gallery web application playing our “inhouse” YouTube iframe video playing web application in a new web browser tab
  • <–>A-V … link to our “inhouse” audio stream only YouTube iframe playing functionality in a new web browser tab

… involving changes to …

  • our changed …

    var ytlist='';

    if (('' + document.URL + ('' + location.hash)).indexOf('onerow=') != -1) {
    setTimeout(function(){
    var inis='';
    var iwis=document.getElementById('vplayer1').getBoundingClientRect().width;
    var ifsare=document.getElementsByTagName('iframe');
    for (var jtt=0; jtt<ifsare.length; jtt++) {
    //alert(ifsare[jtt].src);
    if (ifsare[jtt].src.indexOf('/embed/') != -1) {
    if (ytlist == '') {
    ytlist='' + ifsare[jtt].src.split('/embed/')[1].substring(0,11);
    } else {
    ytlist+=',' + ifsare[jtt].src.split('/embed/')[1].substring(0,11);
    }
    }
    ifsare[jtt].style.width='' + iwis + 'px';
    }
    var toho=document.getElementsByTagName('table')[0];
    var tih=toho.innerHTML;
    var newtih=tih;
    //alert(tih);
    var thingos=tih.split('<tr');
    for (var itt=3; itt>=1; itt--) {
    if (itt == 1) {
    inis='<tr' + thingos[itt].split('</tr>')[0] + '</tr>';
    newtih=newtih.replace(inis, inis.replace('</tr>','<!--/tr-->'));
    } else if (itt == 3) {
    inis='<tr' + thingos[itt].split('</tr>')[0] + '</tr>';
    newtih=newtih.replace(inis, inis.replace('<tr>','<!--tr-->'));
    } else {
    inis='<tr' + thingos[itt].split('</tr>')[0] + '</tr>';
    newtih=newtih.replace(inis, inis.replace('<tr>','<!--tr-->').replace('</tr>','<!--/tr-->'));
    }
    }
    toho.innerHTML=newtih;
    toho.style.width='1000%';
    }, 4000);
    }

    setTimeout(function(){
    var antwo='';
    if (ytlist == '') {
    var ifsare=document.getElementsByTagName('iframe');
    for (var jtt=0; jtt<ifsare.length; jtt++) {
    //alert(ifsare[jtt].src);
    if (ifsare[jtt].src.indexOf('/embed/') != -1) {
    if (ytlist == '') {
    ytlist='' + ifsare[jtt].src.split('/embed/')[1].substring(0,11);
    } else {
    ytlist+=',' + ifsare[jtt].src.split('/embed/')[1].substring(0,11);
    }
    }
    }
    }
    if (ytlist != '') {
    antwo+=' <a title="Audio and video plays of YouTube videos" target=_blank href="/HTMLCSS/swipe_media.html?youtube=' + encodeURIComponent(ytlist) + '"><--><sup>A+V</sup></a>';
    antwo+=' <a title="Audio only plays of YouTube videos" target=_blank href="/HTMLCSS/swipe_media.html?audioyoutube=' + encodeURIComponent(ytlist) + '"><--><sub>A-V</sub></a>';
    }
    if (document.URL.indexOf('?') != -1) {
    document.getElementById('wshuffle').innerHTML+=' <a title="Present in one table row" target=_self href="' + document.URL.replace('?', '?onerow=' + Math.floor(Math.random() * 1989786)) + '"><--></a>' + antwo + ' ';
    } else {
    document.getElementById('wshuffle').innerHTML+=' <a title="Present in one table row" target=_self href="' + document.URL + '?onerow=' + Math.floor(Math.random() * 1989786) + '"><--></a>' + antwo + ' ';
    }
    }, 9000);

    … youtube_brady_bunch.js being used in our inhouse Disco web application “peer to peer suite” web application “grandparent” level example …
  • “second draft” swipe_media.html Tabular Single Row Image Gallery web application

Previous relevant Tabular Single Row Image Gallery Primer Tutorial is shown below.

Tabular Single Row Image Gallery Primer Tutorial

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.

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.

This entry was posted in eLearning, Event-Driven Programming, Tutorials and tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *