jQuery PhotoShoot Plugin 1.0

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:

Supported Parameters
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.

Join our newsletter and get our PSDs!21,291 people learn about HTML5, JS and more. Join them!

by Martin Angelov

Martin is a web developer with an eye for design from Bulgaria. He founded Tutorialzine in 2009 and it still is his favorite side project.

♥ 21,291 developers love it

25 Comments

  1. Ricardo Zea says:

    Really, really cool... but, what would be a 'real world' usage of this?

    Thanks.

  2. Masey says:

    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?

  3. Martin Angelov says:

    @ 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:

    var arr = new Array('image1.jpg', 'img2.jpg', 'image3.jpg');

    var config = {
    image : arr[parseInt(Math.random()*arr.length)]
    }

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

  4. Ives says:

    Great plugin. I'm impressed!

  5. Michael says:

    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.

  6. n0tiz says:

    Really nice done!
    This looks awesome!

  7. Web Canedo says:

    wow! amazing! thanks...

  8. Awesome effect, looking forward to more quality posts. Thanks.

  9. Adebayo says:

    you are 222222222222 cool..... and thanks a million times....

  10. Xcellence IT says:

    I'm impressed. Can I save that captured image ?

  11. Zoom Bali says:

    Wow this is great! Perfect for photographer's photofolio :D
    Thanks for share

  12. Ce. says:

    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.

  13. kyriakos says:

    i love it cant wait to see some real life uses of this effect

  14. Great plugin. I'm wondering how blur the image using jquery...

  15. Justin says:

    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.

  16. Sony AK says:

    Great effect, but I am agree, what is the usage for real world application? For fancy use it's OK :)

  17. Future Webs says:

    Wow, Great effect, thanks for sharing!

  18. Miller says:

    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…

  19. Alex67cv says:

    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 ..

  20. Abenisa says:

    Looks really well! Thanks for sharing. I 'll test it today.. Regards

  21. Bayilikler says:

    Great plugin. Thanks for sharing...

  22. Irfan Hussain says:

    Really impressive work.
    Can anyone help me to add Zoom In and Zoom Out Functionality on MouseWheel Up and MouseWheel Down respectively.

  23. shubh says:

    Aweomsness.. this is what we needded for our FB App.. thanks a lot mann.. you are great.. \m/

  24. roy says:

    awesome but can you please guide for taking screenshots for div contents please?

    thank you
    roy

  25. Srdjan says:

    Is there a possibility to save the image to server on each click?

    Btw, great plugin, exactly AWESOME, good job! :)

Add Comment

Add a Reply

HTML is escaped automatically. Surround code blocks with <pre></pre> for readability.
Perks:   **bold**   __italics__   [some text](http://example.com) for links