Image Gallery using React JS

Image Gallery using React JS.markdown

Image Gallery using React JS

Using ReactJS to create an image gallery of babies using placeholder images. Colors used: Hot Pink & Cotton Candy.

A Pen by Ronaldo Lima on CodePen.

License.

index.html

<div id="gallery"></div>

script.js

/** @jsx React.DOM **/
data = [{"id":"VadjvlvBDxE"},{"id":"hsfA4kTdltE"},{"id":"c_yomf6U35A"},{"id":"c_yomf6U35A"}]

var selectedImg = React.createClass({
  render: function() {
    return (
      <div className="embed-responsive embed-responsive-16by9">
        <iframe class="embed-responsive-item" src={this.props.hero}></iframe>  
      </div>
    )
  }  
});


var imgItem = React.createClass({
  render: function() {
    return (<img src={'http://img.youtube.com/vi/' + this.props.path + '/default.jpg'} />)
  }
});

var imgRow = React.createClass({
  render: function() {
    return (
      <div className="img-row">
        <ul>
            {this.props.children}
        </ul>
      </div>
    )
  }
});

var Gallery = React.createClass({
  handleClick: function(imageid) {
    var image = '//www.youtube.com/embed/' + imageid; 
    this.setState({heroimg: image});
  },
  getInitialState: function() {
    return {
      heroimg: '//www.youtube.com/embed/VadjvlvBDxE/',
      images: this.props.data
    }
  },
  render: function() {
    return (
      <div className="main">   
        <selectedImg hero={this.state.heroimg} />
        <imgRow>
          {this.state.images.map(function(image) {
              return (
                <li onClick={this.handleClick.bind(this,image.id)}>
                  <imgItem path={image.id} />
                </li>
              )
            }, this)}
        </imgRow>
      </div>
    );
  }
});

React.renderComponent(<Gallery data={data} />, document.getElementById('gallery')); 

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://codepen.io/chriscoyier/pen/yIgqi.js"></script>
<script src="http://fb.me/react-0.11.1.js"></script>
<script src="http://fb.me/JSXTransformer-0.11.0.js"></script>

style.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #c5c5c5;
}

h1 {
  color: #F4C2C2;
  text-align: center;
  margin: 1em 0 0 0;
}

#gallery {
  max-width: 30em;
  margin: 1em auto;
  background: #fff;
  padding: 1em;
}
iframe{
 width: 28em;
 height: 16em;
}
.img-row li {
  float: left;
  width: 25%;
  list-style: none;
  cursor: pointer;
  padding: .3em;
}
.img-row li:hover {
  opacity: .5;
}
.img-row li img {
  width: 100%;
}

.hero-img {
  text-align: center;
}
.hero-img img {
  max-width: 100%;
}