javascriptjqueryportfolioshutter

jQuery Custom Shutter


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%;

}

Solution

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