Instantly share code, notes, and snippets.

anonymous /index.html
Created Jul 16, 2015

Embed
What would you like to do?
JS Bin // source https://jsbin.com/yoyuva
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://fb.me/react-0.13.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
<title>JS Bin</title>
<style type="text/css">
body{
font-family: Helvetica, sans-serif;
}
div#fullpic{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(12,12,12,0.85);
}
</head>
<body>
<h1 id="head1">Flickr-Test</h1>
<div id="fullpic" style="display: none;"></div>
<div id="container"></div>
<script type="text/jsx">
var FlickrThumb = React.createClass({
handleClick : function() {
React.render( <FlickrFull image_url={this.props.image_url} /> , document.getElementById('fullpic'));
},
render: function() {
var picCSS = {
height: 100,
width: 100,
cursor: 'pointer',
border: '4px solid #CACACA',
margin: '8px'
};
return (
<img style={picCSS} key={this.props.key} src={this.props.image_url} title={this.props.image_title} onClick={this.handleClick} />
)
}
});
var FlickrFull = React.createClass({
componentDidMount: function() {
$('#fullpic').fadeIn();
},
handleClick : function() {
$('#fullpic').fadeOut();
React.unmountComponentAtNode(document.getElementById('fullpic'));
},
render: function(){
var fullpicCSS = {
display: 'block',
height: '80%',
border: '10px solid #CACACA',
margin: '5% auto'
};
return(<img style={fullpicCSS} src={this.props.image_url.replace('_q','_c')} onClick={this.handleClick} />)
}
});
var Flickerer = React.createClass({
getInitialState : function() {
return {
pics : []
};
},
componentDidMount: function() {
$.getJSON("https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
{tags: this.props.tag, tagmode: "any", format: "json"},
$.proxy(function(data) {
var ar = [];
$.each(data.items, function(i,item){
ar.push({key: i, img: item})
});
this._component.setState({
pics: ar
})
},{_component: this})
)
},
render: function() {
return (
<div>
<h2>Neueste Bilder für Tag <i>{this.props.tag}</i>:</h2>
{
this.state.pics.map(function(pic) {
return (
<FlickrThumb key={pic.key} image_url={pic.img.media.m.replace("_m", "_q")} image_title={pic.img.title} />
)
})
}
</div>
)
}
});
React.render(
<Flickerer tag="rp15" />,
document.getElementById('container')
);
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"><\/script>
<script src="//fb.me/react-0.13.1.js"><\/script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"><\/script>
<title>JS Bin</title>
<style type="text/css">
body{
font-family: Helvetica, sans-serif;
}
div#fullpic{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(12,12,12,0.85);
}
</head>
<body>
<h1 id="head1">Flickr-Test</h1>
<div id="fullpic" style="display: none;"></div>
<div id="container"></div>
<script type="text/jsx">
var FlickrThumb = React.createClass({
handleClick : function() {
React.render( <FlickrFull image_url={this.props.image_url} /> , document.getElementById('fullpic'));
},
render: function() {
var picCSS = {
height: 100,
width: 100,
cursor: 'pointer',
border: '4px solid #CACACA',
margin: '8px'
};
return (
<img style={picCSS} key={this.props.key} src={this.props.image_url} title={this.props.image_title} onClick={this.handleClick} />
)
}
});
var FlickrFull = React.createClass({
componentDidMount: function() {
$('#fullpic').fadeIn();
},
handleClick : function() {
$('#fullpic').fadeOut();
React.unmountComponentAtNode(document.getElementById('fullpic'));
},
render: function(){
var fullpicCSS = {
display: 'block',
height: '80%',
border: '10px solid #CACACA',
margin: '5% auto'
};
return(<img style={fullpicCSS} src={this.props.image_url.replace('_q','_c')} onClick={this.handleClick} />)
}
});
var Flickerer = React.createClass({
getInitialState : function() {
return {
pics : []
};
},
componentDidMount: function() {
$.getJSON("https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
{tags: this.props.tag, tagmode: "any", format: "json"},
$.proxy(function(data) {
var ar = [];
$.each(data.items, function(i,item){
ar.push({key: i, img: item})
});
this._component.setState({
pics: ar
})
},{_component: this})
)
},
render: function() {
return (
<div>
<h2>Neueste Bilder für Tag <i>{this.props.tag}</i>:</h2>
{
this.state.pics.map(function(pic) {
return (
<FlickrThumb key={pic.key} image_url={pic.img.media.m.replace("_m", "_q")} image_title={pic.img.title} />
)
})
}
</div>
)
}
});
React.render(
<Flickerer tag="rp15" />,
document.getElementById('container')
);
<\/script>
</body>
</html></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment