<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/ethanselzer/pen/oePMNY?depth=everything&order=popularity&page=25&q=react&show_forks=false" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<style class="cp-pen-styles">.perimeter {
max-width: 1024px;
margin: 0 auto;
display: flex;
flex-direction: column;
}
.image {
flex: 0 0 100%;
}
.copy {
padding: 20px;
font-family: sans-serif;
}
@media (min-width: 415px) {
.perimeter {
flex-direction: row;
}
.image {
flex: 0 0 50%;
}
}
@media (min-width: 800px) {
.image {
flex: 0 0 33.5%;
}
}
</style></head><body>
<div id="root"></div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js'></script><script src='https://unpkg.com/react-image-magnify@2.3.0/dist/umd/ReactImageMagnify.js'></script>
<script >'use strict';
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) {if (window.CP.shouldStopExecution(1)){break;} var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); }
window.CP.exitedLoop(1);
} return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var ReactImageMagnify = ReactImageMagnify.default;
var imageBaseUrl = 'https://s3-us-west-1.amazonaws.com/react-package-assets/images/';
var images = [{ name: 'wristwatch_355.jpg', vw: '355w' }, { name: 'wristwatch_481.jpg', vw: '481w' }, { name: 'wristwatch_584.jpg', vw: '584w' }, { name: 'wristwatch_687.jpg', vw: '687w' }, { name: 'wristwatch_770.jpg', vw: '770w' }, { name: 'wristwatch_861.jpg', vw: '861w' }, { name: 'wristwatch_955.jpg', vw: '955w' }, { name: 'wristwatch_1033.jpg', vw: '1033w' }, { name: 'wristwatch_1112.jpg', vw: '1112w' }, { name: 'wristwatch_1192.jpg', vw: '1192w' }, { name: 'wristwatch_1200.jpg', vw: '1200w' }];
var Example = function (_React$Component) {
_inherits(Example, _React$Component);
function Example() {
_classCallCheck(this, Example);
return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));
}
Example.prototype.render = function render() {
return React.createElement(
'div',
{ className: 'perimeter' },
React.createElement(
'div',
{ className: 'image' },
React.createElement(ReactImageMagnify, {
smallImage: {
alt: 'Wristwatch by Ted Baker London',
isFluidWidth: true,
src: imageBaseUrl + 'wristwatch_1033.jpg',
srcSet: this.srcSet,
sizes: '(min-width: 800px) 33.5vw, (min-width: 415px) 50vw, 100vw'
},
largeImage: {
alt: '',
src: imageBaseUrl + 'wristwatch_1200.jpg',
width: 1200,
height: 1800
},
isHintEnabled: true
})
),
React.createElement(
'div',
{ className: 'copy' },
React.createElement(
'h3',
null,
'Touch'
),
React.createElement(
'p',
{ className: 'App-intro' },
'Press (long touch) image to magnify. Pan (drag) to traverse image.'
),
React.createElement(
'p',
{ className: 'App-intro' },
'Note the page can be scrolled when touch begins on image.'
),
React.createElement(
'h3',
null,
'Mouse'
),
React.createElement(
'p',
null,
'Hover image to magnify'
)
)
);
};
_createClass(Example, [{
key: 'srcSet',
get: function get() {
return images.map(function (image) {
return '' + imageBaseUrl + image.name + ' ' + image.vw;
}).join(', ');
}
}]);
return Example;
}(React.Component);
ReactDOM.render(React.createElement(Example, null), document.getElementById('root'));
//# sourceURL=pen.js
</script>
</body></html>
