Pinbox.js – Photos Then and Now (jQuery plugin)

With the help of a colleague, I’m gathering images of an area of Dallas, TX just east of downtown around the campus of Dallas Theological Seminary where I work. I wanted to make the photos interactive like the animated GIF you see here.

Live Demo Download Code

Code Explanation

To make this work, I start with a simple <img /> tag and then add some HTML5 data-* attributes that specify the size and position of the inner image:

<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"
/>

This ensures the images will still function properly even if the JavaScript doesn’t fire properly. The next step is to include the Pinbox.js library and then use jQuery to instantiate it when the document has loaded. The script takes care of the rest.

<script src="src/jquery.js"></script>
<script src="src/jquery.pinbox.js"></script>
<link rel="stylesheet" href="src/jquery.pinbox.css" />
<script>
jQuery(document).ready(function($) {
	$('.pinbox').pinbox();
});
</script>

Live Demo Download Code