Dynamic Scrolling Image List in Webviewer

Been working on this for a while, time to share the fruits of my labours!

There are many different ways to achieve much the same thing, but I wanted to have a go at building things up from scratch, just use pure javascript, and provide some user functionality in the process.

Youtube video to start things off:


How it works:

The Ai2 blocks feed the html file with all the data: image files, file locations, titles and subtitles, shape of image (square/circle), colour scheme.

The html file pulls all this information in through the webviewstring, and then by creating arrays from the webviewstring, dynamically builds a “card” for each image.

Note the use of classes from the w3.css and w3mobile.css to assist with the cards layout

A click on the image returns the file to the AI2 app and displays it.

Developers can choose to set all the variables to their liking, or can also provide a settings area for the user to do likewise (further demo hopefully coming on this!)

A couple of Taifun’s wonderful extensions used.



<DOCTYPE html>



<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1, user-scalable=0">

<title>mobile | img and txt</title>

<link rel="stylesheet" href="w3mobile.css">

<link id="theme_css" rel="stylesheet" href="w3-theme-blue.css">



<header class="w3-top w3-bar w3-theme">

         <h1 class="w3-bar-item" id="header">Header</h1>


<div class="w3-container" style="margin-top:90px">


<div id="carddisplay"></div>



<footer class="w3-container w3-bottom w3-theme w3-margin-top">

   <h3 id="footer">Footer</h3>


<script type="text/javascript">


function makePage() {

var raw = window.AppInventor.getWebViewString().split(',');

var data1 = raw.slice(2,5);

var data2 = raw.slice(0,1);

var data3 = raw.slice(1,2);

var data4 = raw.slice(5);

var data5 = [], size = 3;

while (data4.length > 0)

    data5.push(data4.splice(0, size));

var myLength = data5.length;

//get header and footer

var newHeader = data1[0];

var header = document.getElementById('header');

header.innerHTML = newHeader;

var newFooter = data1[1];

var footer = document.getElementById('footer');

footer.innerHTML = newFooter;

//get colour theme

document.getElementById('theme_css').href = data1[2]; ;

var htmlTemplate =  

'<div class="w3-cell-row">\

<div class="w3-cell" style="width:30%">\

<img src="{W}{X}.png" style="width:100%" class="{V} w3-hover-opacity" onclick="onClick(this)">\


<div class="w3-cell w3-container" style="display:flex;align-items:center">\









var newHtml = '';

var xcontainer;

var tempContainer;

   for (var i = 0; i < myLength; i++) {

//                            image shape             image path           image name (without extn)        title                       subtitle

newHtml = htmlTemplate.replace('{V}', data3[0]).replace('{W}', data2[0]).replace('{X}', data5[i][0]).replace('{Y}', data5[i][1]).replace('{U}', data5[i][2]);

tempContainer = document.createElement('div');

tempContainer.innerHTML = newHtml;

xcontainer = document.getElementById('carddisplay');




function onClick(element) {