jQuery PhotoShoot Plugin 1.0
Created by Martin Angelov on Feb 3rd, 2010
The jQuery PhotoShoot plugin gives you the ability to convert any div on your web page into a photo shooting effect, complete with a view finder. You can check out the demonstration above, or a nice tutorial on how to use it here.
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:
| Parameter | Default Value | Description |
|---|---|---|
| image | “” | Required parameter. Specify the URL of the image to be shown. |
| blurLevel | 4 | The higher the blur level, the more blurred the image. |
| opacity | 0.92 | The lower the opacity, the darker the background behind the viewfinder. |
| viewFinder | { width:300, height:200, img:” } | Expects an object with the properties width, height and img. With it you can change the size and png graphic of the view finder. If no img is provided, the default one is shown. |
| onClick | function(){} | Expects the name of the function that is going to be executed on click. An object is passed as a parameter. See below. |
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.
Related:
14 Responses
Leave a Reply
Really, really cool… but, what would be a ‘real world’ usage of this?
Thanks.
This is a fantastic effect, but it would be even better if there was a way to randomize a number of images so there was a different one each time the page was loaded…
Easily done?
@ Ricardo Zea
Be sure that the community will come up with many great uses.
@ Masey
You can randomize the images before feeding them to the plugin (like in the demonstration). You’ll just need an array with the images and to put a Math.random() statement in the configuration object:
Great plugin. I’m impressed!
My ideas include cropping pictures, or making your own Where’s Waldo or other games like it.
Great work, I love the application of it, and the methods of implementation are genius.
Really nice done!
This looks awesome!
wow! amazing! thanks…
Awesome effect, looking forward to more quality posts. Thanks.
you are 222222222222 cool….. and thanks a million times….
I’m impressed. Can I save that captured image ?
Wow this is great! Perfect for photographer’s photofolio
Thanks for share
If someone could somehow implement a share function after you’ve gathered your images that would be a useable scenario. Otherwise, besides maybe a cropping function I see no real use for this functionality. Although, I have to agree with everyone else on how awesome this is. I just wish I could figure out some scenario where I might use this on a real site.
i love it cant wait to see some real life uses of this effect
Great plugin. I’m wondering how blur the image using jquery…