Simple Image Comparison jQuery Plugin

• Author: John Dyer http://j.hn/
• License: GPLv2/MIT
• Thanks: my employer, Dallas Theological Seminary

Installation and Usage

1. Add Script and Stylesheet

<script src="jquery.js"></script>
<script src="pinbox.js"></script>
<link rel="stylesheet" href="pinbox.css" />

2. Add an <img /> tag and specify dimensions

<img src="images/convent-pano.jpg"
	width="940"
	height="365"
	data-small-src="images/convent-pano-inner.jpg"
	data-small-width="507"
	data-small-height="264"
	data-small-left="163"
	data-small-top="11"
	class="pinbox"
	alt="View from Convent Street"
/>

3. Call the jQuery Plugin

<script>
jQuery(document).ready(function($) {
	$('.pinbox').pinbox();
});
</script>