jQuery Custom Shutter

Question

I have a recognition site with webcam. In this tutorial there is a good shutter affect. I have one simple button and one <div>. I want that when clicked button then div was shuttered. I tried a lot of times but I can't. Anybody can help me ?

My division styles.

<div id="CustomWebCam" class="CustomWebCam">

.CustomWebCam{
            padding: 1px 1px 1px 1px;
            background-color: #f6c0c0;
            height: 96%;
            width: 900px;
            display: inline-block;
            margin: 1% 1% 1% 1%;

}

Answer 1

Just link the library and CSS:

<link href="your-path/jquery.shutter.css" type="text/css" rel="stylesheet">
<script src="your-path/jquery.shutter.js">

The button:

<button id="btn" onclick="onClick();"> Shutter </button>

The JS:

$(document).ready(function(){

    var container = $('#container');

    container.tzShutter({

        imgSrc: 'http://demo.tutorialzine.com/2011/03/photography-portfolio-shutter-effect/assets/jquery.shutter/shutter.png',

        closeCallback: function(){

            /* AFTER CLOSE */

            // Scheduling a shutter open in 0.1 seconds ( time that keep closed )
            setTimeout(function(){container.trigger('shutterOpen')},100);
        },
    });
});


function onClick(){
    $("#container").trigger('shutterClose');
};

Working example.