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.
113 lines (96 loc) • 3.29 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>FocusPoint Tests</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="test.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 test cases individually
$('#Default').focusPoint();
$('#MissingWH').focusPoint();
$('#ThrottleSlow').focusPoint({
throttleDuration: 500 //ms
});
$('#NoThrottle').focusPoint({
throttleDuration: 0 //ms
});
$('#NoResize').focusPoint({
reCalcOnWindowResize : false
});
$('#NoResize a.adjust').click(function(){
$('#NoResize').focusPoint('adjustFocus'); //Short for .data('focusPoint').adjustFocus();
return false;
});
$('#NoResize a.adjust2').click(function(){
$('#NoResize').adjustFocus(); //Old method
return false;
});
$('#NoResize a.start').click(function(){
$('#NoResize').focusPoint('windowOn');
return false;
});
$('#NoResize a.stop').click(function(){
$('#NoResize').focusPoint('windowOff');
return false;
});
});
}(jQuery));
//]]>
</script>
</head>
<body>
<p><b>FocusPoint Tests</b> <a href="https://github.com/jonom/jquery-focuspoint">» Project Home</a></p>
<div id="Default" 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="" />
<span class="label">Default behaviour</span>
</div>
<div id="MissingWH" class="focuspoint"
data-focus-x="0.29"
data-focus-y="-0.284">
<img src="../img/bird.jpg" alt="" />
<span class="label">Missing image-w and image-h</span>
</div>
<div id="ThrottleSlow" 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="" />
<span class="label">Slow redraw (high throttleDuration)</span>
</div>
<div id="NoThrottle" 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="" />
<span class="label">No throttling</span>
</div>
<div id="NoResize" 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="" />
<span class="label">Don't adjust on window resize
<a href="#" class="adjust">» Adjust Focus</a>
<a href="#" class="adjust2">» Adjust Focus (old method)</a>
<a href="#" class="start">» Window On</a>
<a href="#" class="stop">» Window Off</a>
</span>
</div>
</body>
</html>