jQuery PhotoShoot Plugin 1.0
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:
| 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.
Bootstrap Studio
The revolutionary web design tool for creating responsive websites and apps.
Learn more
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 ?
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...
The blur effect is created by duplicating the image many times, setting the opacity to near-transparent, then moving them X pixels in Y direction to make it look scattered.
People should stop writing jQuery plugins that mar the DOM just because they think nobody's watching. Lots of people don't care and find the end result cool anyway; developers are still going to cringe.
Great effect, but I am agree, what is the usage for real world application? For fancy use it's OK :)
Wow, Great effect, thanks for sharing!
To get a real world usage it would be able to look at the shots as enlarged images. I know it is possible, look at ajax-zoom jQiery plugin – http://www.ajax-zoom.com/index.php?cid=examples to see what I mean…
Hello, this is really impressive ... I'd like to use this plugin jQuery on a site where people who would use the photo shoot to do to save the photo taken ..
When you shoot well and thumbnails displayed below ...
Is there no way to display them in a gallery below and let the opportunities for users to save pictures they have taken?
It would be great for my future projects and this plugin would use all its ...
Can tell me how to shoot only when Internet users and many thumbnails are displayed in a gallery and not just lower like where were can not save or do anything with the shots taken .. which is a shame ..?
I guess that's feasible with jquery but I do not know enough ... thank you for your answers and any aid ..
Best regards and thank you for your sharing ..
Looks really well! Thanks for sharing. I 'll test it today.. Regards
Great plugin. Thanks for sharing...
Really impressive work.
Can anyone help me to add Zoom In and Zoom Out Functionality on MouseWheel Up and MouseWheel Down respectively.
Aweomsness.. this is what we needded for our FB App.. thanks a lot mann.. you are great.. \m/
awesome but can you please guide for taking screenshots for div contents please?
thank you
roy
Is there a possibility to save the image to server on each click?
Btw, great plugin, exactly AWESOME, good job! :)