WKNqMG

index.html

<div id = "root"></div>
<ul style = "">
<li><img src="images_400x400/ESP_013368_1885.jpg"></li>

<li><img src="images_400x400/ESP_013954_1780.jpg"></li>

<li><img src="images_400x400/ESP_014185_1095.jpg"></li>

<li><img src="images_400x400/ESP_014351_1995.jpg"></li>

<li><img src="images_400x400/ESP_016700_2075.jpg"></li>

<li><img src="images_400x400/ESP_017154_1390.jpg"></li>

<li><img src="images_400x400/ESP_017174_1730.jpg"></li>

<li><img src="images_400x400/ESP_019753_2000.jpg"></li>

<li><img src="images_400x400/ESP_020065_1335.jpg"></li>

<li><img src="images_400x400/ESP_020087_1515.jpg"></li>

<li><img src="images_400x400/ESP_020090_1985.jpg"></li>

<li><img src="images_400x400/ESP_020782_1610.jpg"></li>

<li><img src="images_400x400/ESP_020795_2025.jpg"></li>

<li><img src="images_400x400/ESP_020798_2040.jpg"></li>

<li><img src="images_400x400/ESP_021676_1430.jpg"></li>

<li><img src="images_400x400/ESP_021915_1005.jpg"></li>

<li><img src="images_400x400/ESP_022405_1910.jpg"></li>

<li><img src="images_400x400/ESP_026086_2115.jpg"></li>

<li><img src="images_400x400/ESP_027077_1785.jpg"></li>

<li><img src="images_400x400/ESP_027339_2060.jpg"></li>

<li><img src="images_400x400/ESP_027834_1755.jpg"></li>

<li><img src="images_400x400/ESP_027989_1425.jpg"></li>

<li><img src="images_400x400/ESP_028004_1825.jpg"></li>

<li><img src="images_400x400/ESP_028020_2560.jpg"></li>

<li><img src="images_400x400/ESP_028269_1755.jpg"></li>

<li><img src="images_400x400/ESP_028335_1755.jpg"></li>

<li><img src="images_400x400/ESP_028575_1890.jpg"></li>

<li><img src="images_400x400/ESP_028799_1565.jpg"></li>

<li><img src="images_400x400/ESP_029226_1670.jpg"></li>

<li><img src="images_400x400/ESP_030373_1755.jpg"></li>

<li><img src="images_400x400/ESP_031944_1790.jpg"></li>

<li><img src="images_400x400/ESP_032011_1425.jpg"></li>

<li><img src="images_400x400/ESP_032078_1420.jpg"></li>

<li><img src="images_400x400/ESP_032522_1345.jpg"></li>

<li><img src="images_400x400/ESP_032562_1670.jpg"></li>

<li><img src="images_400x400/ESP_032836_1790.jpg"></li>

<li><img src="images_400x400/ESP_033014_2260.jpg"></li>

<li><img src="images_400x400/ESP_033108_1800.jpg"></li>

<li><img src="images_400x400/ESP_033242_1845.jpg"></li>

<li><img src="images_400x400/ESP_033242_2315.jpg"></li>

<li><img src="images_400x400/ESP_033243_2165.jpg"></li>

<li><img src="images_400x400/ESP_033248_1520.jpg"></li>

<li><img src="images_400x400/ESP_033252_2070.jpg"></li>

<li><img src="images_400x400/ESP_033264_1640.jpg"></li>

<li><img src="images_400x400/ESP_033293_1755.jpg"></li>

<li><img src="images_400x400/ESP_033297_1745.jpg"></li>

<li><img src="images_400x400/ESP_033371_1080.jpg"></li>

<li><img src="images_400x400/ESP_033433_2650.jpg"></li>

<li><img src="images_400x400/ESP_033483_1805.jpg"></li>

<li><img src="images_400x400/ESP_033556_1890.jpg"></li>

<li><img src="images_400x400/ESP_033564_1405.jpg"></li>

<li><img src="images_400x400/ESP_033565_1945.jpg"></li>

</ul>

script.babel

console.log('hello')

const baseUrl = "https://s3-us-west-1.amazonaws.com/marsfromspace.com/"
var imageUrls = [];
var imageLinks = document.getElementsByTagName("img");
for(let i = 0;i < imageLinks.length; i++) {

  imageUrl = imageLinks[i].src.split('/').pop();
    imageUrls.push(baseUrl + imageUrl); 
  }

console.log(imageUrls);


class Gallery extends React.Component {
  
  renderImage(imageUrl) {
    return (
      <section class="stage">
        <figure class="ball"
            style = "background: url({{ this.props.imageUrl }}) repeat-x;"
          ><span class="shadow"></span></figure>
      </section>
    );
  }

  render() {
    return (
      <div className="gallery">
        <div className="images">
          {this.props.imageUrls.map(imageUrl => this.renderImage(imageUrl))}
        </div>
      </div>
    );
  }
}



ReactDOM.render(<Gallery imageUrls={imageUrls} />, document.getElementById("root"));

scripts

<script src="//unpkg.com/react/umd/react.development.js"></script>
<script src="//unpkg.com/react-dom/umd/react-dom.development.js"></script>

wknqmg.markdown

WKNqMG

A Pen by Lisa Ballard on CodePen.

License.