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.
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.
<div id="gallery"></div> |
/** @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')); |
<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> |
* { | |
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%; | |
} |