jQuery PhotoShoot - photo shooting effect jQuery plugin
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. Using this plug-in, we give visitors the ability to take shots of the background image. Each time you click the area, a new shot is added to the slide div with a negative margin to the right.
The technique used in this plug-in is actually quite simple – it just stacks up a bunch of divs, each holding the image as a background and whose opacity is lowered, one on top of the other. Those divs’ positions are off by a few pixels at random, so you end up with a blurred effect.
Supported paramters
| 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. |
Requirements: jQuery Framework
Demo: http://demo.tutorialzine.com/2010/02/photo-shoot..
License: MIT License
0
506
2 Comments
Brian Swartzfager
02.13.2010
Very cool demo! Just FYI: the hyperlink you current have to the demo has “http://” in it twice. I had to copy and paste it into my address bar and remove the first “http” to get to the demo.
mupet
02.13.2010
Thanks Brian for your information, im fix it
.
There are no trackbacks to display at this time.