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

November 2, 2011 | JavaScript | 6 Comments

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"
	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" />
jQuery(document).ready(function($) {

Live Demo Download Code

6 responses to “Pinbox.js – Photos Then and Now (jQuery plugin)”

  1. […] new JQuery script by John Dyer is compact as far as file size and as effective as running something similar to a JQuery image […]

  2. […] if JavaScript isn’t enabled on the end users browser or it simply doesn’t open properly.   Download […]

  3. […] if JavaScript isn’t enabled on the end users browser or it simply doesn’t open properly.   Download […]

  4. […] Pinbox.js for tacking historical photos over modern day locations […]

Hi, I'm John Dyer. In my day job, I build websites and create online seminary software for a seminary in Dallas. I also like to release open source tools including a pretty popular HTML5 video player and build tools that help people find best bible commentaries and do bible study. And just for fun, I also wrote a book on the theology of technology and media.

Fork me on GitHub

Social Widgets powered by