jQuery PhotoShoot Plugin 1.0

Demo Download

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

Related Articles