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.
127 lines (103 loc) • 3.17 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="grid.css">
<style type="text/css">
#Info {
left: 44%;
}
</style>
<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.274"
data-focus-y="0.033"
data-image-w="1000"
data-image-h="667">
<img src="../img/dolphin.jpg" alt="" />
</div>
<div id="Frame2" class="focuspoint"
data-focus-x="-0.274"
data-focus-y="0.033"
data-image-w="1000"
data-image-h="667">
<img src="../img/dolphin.jpg" alt="" />
</div>
<div id="Frame3" class="focuspoint"
data-focus-x="-0.274"
data-focus-y="0.033"
data-image-w="1000"
data-image-h="667">
<img src="../img/dolphin.jpg" alt="" />
</div>
<div id="Frame4" class="focuspoint"
data-focus-x="-0.274"
data-focus-y="0.033"
data-image-w="1000"
data-image-h="667">
<img src="../img/dolphin.jpg" alt="" />
</div>
<div id="Frame5" class="focuspoint"
data-focus-x="-0.274"
data-focus-y="0.033"
data-image-w="1000"
data-image-h="667">
<img src="../img/dolphin.jpg" alt="" />
</div>
<div id="Frame6" class="focuspoint"
data-focus-x="-0.274"
data-focus-y="0.033"
data-image-w="1000"
data-image-h="667">
<img src="../img/dolphin.jpg" alt="" />
</div>
<div id="Frame7" class="focuspoint"
data-focus-x="-0.274"
data-focus-y="0.033"
data-image-w="1000"
data-image-h="667">
<img src="../img/dolphin.jpg" alt="" />
</div>
<div id="Frame8" class="focuspoint"
data-focus-x="-0.274"
data-focus-y="0.033"
data-image-w="1000"
data-image-h="667">
<img src="../img/dolphin.jpg" alt="" />
</div>
<div id="Frame9" class="focuspoint"
data-focus-x="-0.274"
data-focus-y="0.033"
data-image-w="1000"
data-image-h="667">
<img src="../img/dolphin.jpg" alt="" />
</div>
</div>
<div id="Info">
<div id="Original">
<img src="../img/dolphin.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. <a href="https://github.com/jonom/jquery-focuspoint">» Project Home</a></p>
</div>
</body>
</html>