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%;
}
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');
};