jquery-focuspoint
Version:
jQuery plugin for 'responsive cropping'. Dynamically crop images to fill available space without cutting out the image's subject. Great for full-screen images.
63 lines (47 loc) • 1.64 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>FocusPoint Example</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../../css/focuspoint.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<link rel="stylesheet" type="text/css" href="comparison.css">
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript" src="../../js/jquery.focuspoint.js"></script>
<script type="text/javascript">
//<![CDATA[
(function($) {
$(document).ready(function() {
//Activate focus points
$('.focuspoint').focusPoint();
});
}(jQuery));
//]]>
</script>
</head>
<body>
<div id="Frames">
<div id="Frame1" class="focuspoint"
data-focus-x="0.29"
data-focus-y="-0.284"
data-image-w="667"
data-image-h="1000">
<img src="../img/bird.jpg" alt="" />
</div>
<div id="Frame2">
</div>
</div>
<div id="Info">
<div id="Original">
<img src="../img/bird.jpg" alt="" />
<h4><span>Original</span></h4>
</div>
<p><b>Try resizing the window.</b> Watch how the frames change to use all of
the available space while preserving the focus of the image.
The left frame uses FocusPoint to control the crop, while the right frame uses only CSS.
<a href="https://github.com/jonom/jquery-focuspoint">» Project Home</a></p>
</div>
</body>
</html>