Usage

First, you need to upload the plug-in to your server (it would be best to keep the folder structure intact), and include the stylesheet and js file to the page where you want it to show.

<link rel="stylesheet" type="text/css" href="photoShoot/jquery.photoShoot-1.0.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="photoShoot/jquery.photoShoot-1.0.js"></script>

The plug-in depends on version 1.3.2 of jQuery, but will work fine with newer versions as well.

After this you can convert any div on your page by calling the .photoShoot() method and passing a configuration object.

document.ready(function(){

	var config = {
		image : 'picture.jpg',
	}

	$('#selector').photoShoot(config)
});

You can pass additional parameters with the config object, according to the table below.

Parameters

The following parameters are supported:

The onClick function

You can provide your function to be executed when a click occurs. An object containing the location (left and top) of the viewfinder, relative to the background, is passed as the only parameter. Here is how it works:

document.ready(function(){

	var config = {
		image	: 'picture.jpg',
		blurLevel	: 6,
		opacity	: 0.8,
		onClick	: alertPosition
	}

	function alertPosition(param){
		alert("The viewfinder is located at: "+param.left+"x"+param.top);
	}

	$('#selector').photoShoot(config)
});

License

The plugin is distributed under an MIT license.