JSignage:TableTutorial2

Description

Image gallery on two rows

• We now expand our example by using two rows and using the $.g() layer to display both the image and the name in each table cell.

Source code

var scientists = [ 'Albert Einstein', 'Ernest Rutherford', 'Marie Curie', 'Max Planck', 'Niels Bohr', 'Robert Oppenheimer' ];

$.textArea({ height: '20%', fontSize: 40, fontWeight: 'bold', fill: 'black' }).text('Great atom scientists').addTo('svg');

$.table({
        top: '20%',
        rows: 2,
        columns: 3,
        data: scientists,
        renderToSVG: function() {
          var uri = 'media/Atom_5_7/' + encodeURIComponent(this) + '.jpg';
          return $.g().add([
            $.image({ href: uri, height: '80%' }),
            $.textArea({ top: '80%', displayAlign: 'before', fontSize: 24 }).text(this)
          ]);
        }
}).addTo('svg');